D3 gives you a selection library, a lot like jQuery. We can call:
This will return a selection containing the first div on the page by CSS. Typically you want something a little more unique though, such as:
This gives you an array containing a single element. If nothing matches, you get back a selection containing a null value.
We can also select multiple elements at once. We can call:
This will select every div inside every element with a class of ‘graph’. Just like jQuery, we get back an array containing all of the matching DOM nodes.
If nothing matches you get back an empty selection.
select() will return a match containing null if no element matches. selectAll() will return an empty selection. D3 will generally ignore empty values when applying attributes or appending children.
We can of course also chain selections together. Say we wanted to match the divs within a .graph:
We might also break this chain down into parts like this:
let graph = d3.select(".graph"); graph.selectAll("div");
Thus far D3 is quite similar to jQuery.
Exercise - selections
Given the following HTML:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>Title</h1> <div class="graph"> <div></div> <div></div> <div></div> </div> </body> </html>
- Select the h1.
- Select the graph element.
- Select all the divs inside the graph, there should be 3.