Introduction to the v5 version of D3.js (Chapter 2)
1. Use D3.js to display a Hello World text on a web page
<body>
<p></p>
<p></p>
<script>
var p = d3.select("body")
.selectAll("p");
p.text("Hello World");
</script>
</body>
operation result:
Code description:
-It can be found that the author first added two <p> tags to the <body> tag, but did not write any content at that time, and then dynamically generated Hello World in <script>
-var p = d3.select("body")
.selectAll("p"); This is a selection set in D3, which literally means to select the <body> tag first, and then select all <p> tags in the <body> tag, so the var p in p represents the two <p> tags in the <body>
-p.text("Hello World"), people familiar with js will know at a glance that this is to add text to (all) <p> tags, so the result of running shows two Hello Worlds
2. Use D3.js to modify the display of text on the web page
<body>
<p></p>
<p></p>
<script>
var p = d3.select("body")
.selectAll("p");
p.text("http://d3js.org");
</script>
</body>
operation result:
Code description:
-It can be found that whether you use D3.js to modify the text content or display the text content on the web page, the code is the same, the only difference is the text content you want to display