Question

假设您已选择绑定了一些数据，并使用典型的内联匿名函数来访问该数据：

 d3.select("#whatever").each(function(d,i,q) {console.log(d,i,q)})

我们都知道第一个变量是数据，第二个是数组位置。但第三个变量（在这种情况下为q）代表什么？到目前为止，在我测试过的所有内容中，它总是回归零。

Answer 1

秘密的第三个参数仅在您拥有nested selections时使用。在这些情况下，它保存父数据元素的索引。例如考虑这段代码。

var sel = d3.selectAll("foo").data(data).enter().append("foo");
var subsel = sel.selectAll("bar").data(function(d) { return d; }).enter().append("bar");

假设data是嵌套结构，您现在可以执行此操作。

subsel.attr("foobar", function(d, i) { console.log(d, i); });

毫不奇怪，这会将数据项记录在嵌套及其索引中。但你也可以这样做。

subsel.attr("foobar", function(d, i, j) { console.log(d, i, j); });

此处d和i仍然引用相同的内容，但j引用父数据元素的索引，即foo元素。

Answer 2

关于Lars回复的说明，这是正确的，但我发现了另外一个有用的功能。

j元素给出元素的索引，而不考虑父元素的嵌套。换句话说，如果要追加并记录如下，则最终的圆被视为平面数组，而不是一组嵌套数组。因此，您的索引将从0缩放到您拥有的圆形元素的数量，而不考虑嵌套的数据结构。

var categorygroups = chart.selectAll('g.categorygroups')
      .data(data)
      .enter()
        .append('g').attr('class','categorygroups');

      var valuesgroups = categorygroups.selectAll('g.valuesgroups')
        .data(function(d) {return d.values; }).enter().append('g').attr('class','valuesgroups');

        valuesgroups.append('text').text(function(d) {
          return d.category
        }).attr('y',function(d,i) { return (i + 1) * 100 }).attr('x',0);

      var circlesgroups = valuesgroups.selectAll('g.circlesgroups')
        .data(function(d) {return d.values; }).enter().append('g').attr('class','circlesgroups');

        circlesgroups.append('circle').style('fill','#666')
        .attr('cy',function(d,i,j) { console.log(j); return (j + 1) * 100 })
        .attr('cx',function(d,i) { return (i + 1) * 40 });

D3匿名函数中的第三个变量

2 个答案: