What exactly does .selectAll () do?

Question

I played with the example “Using D3.js to Present XML as an HTML Table” to try and learn D3.js. I think I like it, but I can’t understand what .selectAll() does, and the documentation on it is missing very useful.

If you look at an example, line 17: var td = tr.selectAll("td") . I can also write this as tr.selectAll("tr") and it will return the same table / page. Actually, I can write tr.selectAll("SomethingCompletelyRandom") , and it will still work, but I cannot delete .selectAll() .

What's going on here? What does .selectAll() do? And how does it depend on the selector?

Answer 1

the reference to the API you are pointing to is used by selectAll for the previous selection (this is a sub-selection), so it may not make sense to look (and can be confusing). The relevant part of the documentation for viewing here will be here , and in general, an introduction to this page of documentation of choice,.

The reason for using td and tr will be that the original selection does not return anything in both cases (since the place you are selecting from is tr , so far nothing has been added to it.) Standard practice is to choose what you will create because when you extend this to animation and updating it becomes extremely important.

I would recommend watching Three Little Circles and Thinking with Joins Tutorials

Answer 2

It selects all the <td> nodes that are children of the parent <tr> node. D3 returns this as an array object ie selectAll() returns an array containing an array of <td> nodes as objects, and you can call another d3 function for each object. In addition, a good way to understand what is happening behind the scenes is to use the Chrome developer tools and execute some code in the console.

Example: let's say you have this table:

 <table> <tr> <td></td> <td></td> <td></td> </tr> </table> 

If you run d3.selectAll("td") in the console, the result will be:

 [Array[3]] // A two dimensional array that contains 3 of the "td" nodes, each of of which is an object. >0: td // A D3 selection object. >1: td >2: td length: 3 parentNode: document __proto__: Array[0]