Adding D3.js elements to the HTML Page | Realcode4you

Begin with this simple HTML template:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Your beautiful D3 code will go here
        </script>
    </body>
</html>

Back in your HTML, replace the comment between the script tags with:

d3.select("body").append("p").text("New paragraph!");

Let’s walk through what just happened. In sequence, we:

Invoked D3's select method, which selects a single element from the DOM using CSS selector syntax. (We selected the body.)
Created a new p element and appended that to the end of our selection, meaning just before the closing </body> tag in this case.
Set the text content of that new, empty paragraph to “New paragraph!”

All of those crazy dots are just part of D3’s chain syntax.

0 comments