score:7

Accepted answer

the main difference with grouping is that the second argument to your function (i) is the within-group index rather than the within-selection index.

remember the index passed in to any attr, style, etc. functions in d3?

...
.attr('something', function(d, index) {
     // major gymnastics with d and index
}

so when you do a selectall, the index starts from 0 for each group.

so, if you do two chained selectalls where the first (group) levels are rows (tr) and the second (child) levels are cells (td), you'd have the following passed in as indices for a 2 rows x 3 cells table

0, 1, 2, 0, 1, 2

instead of

0, 1, 3, 4, 5, 6

which is what you'd expect when you select just 6 nodes with a single selectall.


the following snippet of code illustrates this

    d3.selectall("#a tr").selectall("td").text(function(d, index) {
      return index;
    })

     d3.selectall("#b td").text(function(d, index) {
      return index;
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
grouped cells (i.e. 2 selectall)
<table id="a">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

ungrouped cells (i.e. 1 selectall)
<table id="b">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>


the first animation on the page you linked to (http://bost.ocks.org/mike/selection/) illustrates this pretty well - here's a marked up version of the same

enter image description here


Related Query

More Query from same tag