Question

Simple html:

 <div class="div1">
      <div class="test"><span>1</span></div>
      <div class="test"><span>2</span></div>
 </div>

And js:

var el = d3.select(".div1").selectAll(".test");
el.each(function() { 
      console.log(arguments);
});

Output:

[undefined, 0, 0]
[undefined, 1, 0]

What is the latest argument (0)? According to source code this is group, but I can’t find anything about selector groups in d3 documentation.

Thanks.

Answer 1

It’s for nested selectors:
http://bost.ocks.org/mike/nest/

e.g. for this HTML:

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

Let’s select td:

var el = d3.selectAll("tr").selectAll("td");

el is [
Array[2]
,
Array[2]
]

and el.each:

el.each(function() { 
    console.log('args',arguments);
});

Output:

args [undefined, 0, 0]
args [undefined, 1, 0]
args [undefined, 0, 1]
args [undefined, 1, 1]