The d3.html() function in d3.js is used to fetch and read the file of type HTML. It fetches the file as text first then parses the file as HTML.
Syntax:
d3.html(input[, init]);
Parameters: This function accepts two parameters as mentioned above and described below:
- input: This parameter is the address of the input file.
- init: This parameter takes a function.
Note: Please create a file named sample.html before going through the below given example.
Example 1: Filename: sample.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>
|
Filename: index.html
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" path1tent=
"width=device-width, initial-scale=1.0"/>
</script>
</head>
<body>
<script>
d3.html("sample.html", function (d) {
console.log(d);
});
</script>
</body>
</html>
|
Example 2: Filename: sample.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>
|
Filename: 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>
<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>
|
Output:
