La función d3.html() en d3.js se usa para obtener y leer el archivo de tipo HTML. Obtiene el archivo como texto primero y luego analiza el archivo como HTML.
Sintaxis:
d3.html(input[, init]);
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- entrada: este parámetro es la dirección del archivo de entrada.
- init: Este parámetro toma una función.
Nota: cree un archivo llamado sample.html antes de pasar por el siguiente ejemplo.
Ejemplo 1: Nombre de archivo: muestra.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0">
</head>
<body>
<p>I am a p tag</p>
<script>
alert("This is from d3.html() function")
</script>
</body>
</html>
Nombre de archivo: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" path1tent=
"width=device-width, initial-scale=1.0"/>
<script src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<script>
d3.html("sample.html", function (d) {
console.log(d);
});
</script>
</body>
</html>
Producción:
Ejemplo 2: Nombre de archivo: muestra.html
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h3>D3.js | d3.html() Function</h3> <p>I am a p tag</p> </body> </html>
Nombre de archivo: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" path1tent=
"width=device-width,initial-scale=1.0"/>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js">
</script>
<script>
d3.html("sample.html", function (d) {
d = [].map.call(d.querySelectorAll("p"), (p) => {
var h3 = d.querySelector("h3");
document.write(`<h3>${h3.textContent}</h3>`);
document.write(`<p>${p.textContent}</p>`);
})
});
</script>
</body>
</html>
Producción:
