d3.select() and d3.selectAll()
The most basics in d3 js are select() and selectAll() are both essentials methods to manipulate SVG with d3 js. You would like to use these to select a node in your HTML. Let’s see an example with select(), first.
const body = d3.select("body");
In this example, we just select the body node to manipulate it with d3 methods (we will see in this article in the next sections).
If you have to select multiple nodes, you can use selectAll() :
const a = d3.selectAll("a");
It’s very important to understand select() and selectAll() because we will use these everywhere.
d3.enter(), d3.data() and d3.append()
The data method will be used to iterate on data (array) to append HTML nodes.
Imagine you have an array with 5 numbers and you would like to add 5 <li> for each value :
You have to select the node ul to append li on it. After that, you would like to selectAll(“li”). data(myNumbers) is like a “foreach”, like a loop on your array. enter() is required here, because you use selectAll(“li”) but <li> aren’t here, yet. append(“li”) is used to create li nodes.
The text() method is used to append text in the nodes. If you would like to add texts for each <li>, you will write something like this :