D3 V4 selectAll
FREE     Duration: 5:02
Part of Course: D3 V4 Tutorial
 

Takeaways:

  • D3 selections can be created with .select and .selectAll
  • d3.selectAll creates a D3 selection with all the DOM elements it finds that match the selector
  • d3.selectAll can create D3 selections using CSS3 id selectors
  • d3.selectAll can create D3 selections using CSS3 class selectors
  • d3.selectAll selections keep track of their parent node

Resources:

Transcript:

D3 V4 selectAll

d3.selectAll creates a selection with all the matching DOM elements for the specific CSS3 selector that you provided.

In this case, you see:

d3.selectAll("div");

What this does is it goes through all the nodes and adds each "div" into this selection.

It goes all the way down.

Then it goes here.

Finds another "div".

So now this selection will end up with these two DOM elements in the selection.


In this exercise, we're going to look at an HTML file with several "divs", some of which are nested inside of each other.

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div id="d_one" class="d_small">Div 1</div>
    <div id="d_two" class="d_medium">Div 2</div>
    <div id="d_tre" class="d_large">Div 3
      <div id="d_for" class="d_medium">Div 4</div>
      <div id="d_fiv" class="d_tiny">
        Div 5
        <div id="d_six" class="d_large">Div 6</div>
      </div>
    </div>
  </body>
</html>

And first we will do a:

d3.selectAll("div");

to see what specific nodes were found.

And we'll use the map to do a function so we can look at the parent node of each "div":

d3.selectAll("div").nodes().map(function(d) { return d.parentNode; });

Then we will do a:

d3.selectAll(".d_medium");

So here we're using a class, rather than a tag selector.

And then finally, we'll use the hash-mark or pound-sign to select an id and see what nodes and what parents they return:

d3.selectAll("#d_tre");


Let's now take a look at the HTML file and start doing the exercise.

On this side of your screen, you see the HTML file:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div id="d_one" class="d_small">Div 1</div>
    <div id="d_two" class="d_medium">Div 2</div>
    <div id="d_tre" class="d_large">Div 3
      <div id="d_for" class="d_medium">Div 4</div>
      <div id="d_fiv" class="d_tiny">
        Div 5
        <div id="d_six" class="d_large">Div 6</div>
      </div>
    </div>
  </body>
</html>

We are loading D3 v4 from the d3js.org website.

Then you can see that we have a div the id of "d_one".

Then a div with the id of "d_two".

Then a div with the id of "d_tre".

This div has two children nodes: a div with the id of "d_for" and a div "d_fiv".

This particular div has a child div within it.

Which is "d_six".

Here we see the result.

Now we're going to go through the exercises.


We start by creating a selection of all the divs:

d3.selectAll("div");

Now we're going to look at the specific nodes:

d3.selectAll("div").nodes();

We see that it returns six.

If we click the arrow, we can see that we have six divs inside of this selection.

Note that it starts with a 0 count - so 0, 1, 2, 3, 4, 5.

If we highlight them, you can see each specific div.

Then we're going to look at the parent node:

d3.selectAll("div").nodes().map(function(d) { return d.parentNode; });

We see that it is "body", "body", "body", the div with the id "d_tre", div with the id "d_tre", and div with the id "d_fiv".

Which is what is expected.

The parent node of this div is the "body".

The parent node of this div is the "body".

The parent node of this div is the "body".

And the parent node of this div is "d_tre".

Same for this one.

And then, "d_six" has this as the parent node.

Let's close this and go to the next exercise.


In this case, we are going to do a selectAll of the class ".d_medium":

d3.selectAll(".d_medium");

Looking at the HTML file, we see that this particular div has that class and this particular div.

Looking at the nodes:

d3.selectAll(".d_medium").nodes();

We see that there are two, which is what we expect.

Looking at the parent nodes:

d3.selectAll(".d_medium").nodes().map(function(d) { return d.parentNode; });

We see that the parent node of the first div was "body" and the parent node of the second div in this selection is the div with the id of "d_tre".

So here this div has this div as the parent node.

And this div has the "body" element as the parent node.

Let's close this up.


Lastly we look at doing a D3 selectAll of a particular id:

d3.selectAll("#d_tre");

You can see that a selection is created.

When we look at the nodes:

d3.selectAll("#d_tre").nodes();

You see that there is only one node.

This is expected.

So a node with the id of "d_tre" is this particular node.

There is only one DOM element that has that id.

So that is why that selection only has one element.

And lastly, we look at the parent node:

d3.selectAll("#d_tre").nodes().map(function(d) { return d.parentNode; });

And we see that it is the "body".

Which is what is expected.

The parent node of this particular div is the "body".

<< Back To D3 Screencast and Written Tutorials Index