javascript - D3.js-选择的工作方式-需要澄清Mike的文章

在http://bost.ocks.org/mike/selection/中，Mike讨论了对选择应用功能。



这可能很简单，但是由于某些原因，我无法完全理解这一点。有谁愿意举一个例子来说明这一点。

最佳答案

还记得d3中传递给任何attr，style等函数的索引吗？

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

因此，当您执行selectAll时，每个组的的索引都从0开始。

因此，如果您对第一个(组)级别是行(tr)，第二个(子级)是单元格(td)进行两个链接的selectAlls，则将以下内容作为2行x的索引传递进来3格表

0, 1, 2, 0, 1, 2

代替

0, 1, 3, 4, 5, 6

当您仅选择6个带有单个 selectAll的节点时，这就是您所期望的。

以下代码段说明了这一点

    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/)很好地说明了这一点-这是该动画的标记版本

关于javascript - D3.js-选择的工作方式-需要澄清Mike的文章，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32013889/