javascript – D3.js – 如何选择工作 – 需要澄清Mike的文章

在 http://bost.ocks.org/mike/selection/,迈克谈到在选择上应用函数.

When you use a function to define a selection.attr or selection.style,the function is called for each element; 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.

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

解决方法

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.

还记得传入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,2

代替

0,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/)很好地说明了这一点 – 这是相同的标记版本