Javascript D3.js-选择如何工作-需要澄清Mike'；s文章

在中，Mike讨论了在选择上应用函数

使用函数定义selection.attr或selection.style时，会为每个元素调用该函数；分组的主要区别在于，函数（i）的第二个参数是组内索引，而不是选择内索引

这可能很简单，但出于某种原因，我不能完全理解这一点。请大家举个例子来解释一下

分组的主要区别在于 函数（i）是组内索引，而不是 在选择索引内

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

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

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

因此，如果您执行两个链式SelectAll，其中第一个（组）级别是行（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（函数（d，索引）{
收益指数；
})
d3.选择全部（“#b td”）.文本（函数（d，索引）{
收益指数；
})

分组单元格（即2个selectAll）
未分组的单元格（即1个selectAll）
在上下文中考虑这一点甚至更清楚。我认为这使得它非常直观，为什么它是以这种方式实现的，而索引不在选择范围内。@Larskothoff-你是对的。这就解释了“为什么你需要它”除了它的含义外，它还有更好的图表，我的MSPaint尝试：-）@LarsKotthoff:这对理解“为什么”部分有很大帮助。@potatopeelings-非常感谢你的精彩解释。