D3.js - 如何选择工作 - 需要澄清迈克的文章

Question

在http://bost.ocks.org/mike/selection/中,Mike讨论了如何在选择中应用函数.

当您使用函数定义selection.attr或selection.style时,将为每个元素调用该函数; 与分组的主要区别在于函数(i)的第二个参数是组内索引而不是选择内索引.

这可能很简单,但由于某种原因,我无法完全理解这一点.有人会善意用一个例子解释这个.

Answer 1

与分组的主要区别在于函数(i)的第二个参数是组内索引而不是选择内索引.

还记得传入d3中任何attr,style等函数的索引吗？

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

因此,当您执行selectAll时,索引从每个组的0开始.

因此,如果您执行两个链式selectAlls,其中第一个(组)级别是行(tr),第二个(子级)级别是单元格(td),则您将传入以下作为2行x 3单元格的索引表

0, 1, 2, 0, 1, 2

代替

0, 1, 3, 4, 5, 6

当您使用单个 selectAll 仅选择6个节点时,这是您所期望的.

以下代码片段说明了这一点

    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>

您链接到的页面上的第一个动画(http://bost.ocks.org/mike/selection/)很好地说明了这一点 - 这里是相同的标记版本