D3 v3中.attr()第三个参数返回对象数组而非父元素索引求助

嘿，我刚好踩过D3 v3的这个坑！你遇到的问题其实是版本差异导致的：在D3 v3里，attr()（以及style()这类方法）的回调第三个参数，是当前元素的兄弟元素组成的数组，而不是父元素的索引——这就是你拿到对象数组而非整数的原因。

下面给你两种可靠的解决方法，帮你拿到父元素的索引：

方法一：绑定数据时传递父元素索引 #

这是最稳妥的方式，在数据绑定阶段就把父元素的索引和子数据绑定在一起，避免后续DOM操作的不确定性：

function positiveBars(x, y, n, svgElement, colors) {
  svgElement.selectAll(".positiveBar")
    .data(function(d, j){ // 这里的j就是外层父元素的索引！
      // 把父索引和子数据打包成新对象
      return d.map(function(childData) {
        return {
          value: childData,
          parentIndex: j
        };
      });
    })
    .enter()
    .append("rect")
    .attr("x", function(d, i){
      // 直接通过d.parentIndex获取父元素索引
      console.log("父元素索引：", d.parentIndex);
      console.log("当前子元素索引：", i);
      // 你的其他x坐标计算逻辑...
    });
}

方法二：通过DOM节点计算父元素索引 #

如果你不想修改原数据结构，可以直接通过DOM节点的关系来计算父元素的索引：

function positiveBars(x, y, n, svgElement, colors) {
  svgElement.selectAll(".positiveBar")
    .data(function(d){ return d; })
    .enter()
    .append("rect")
    .attr("x", function(d, i){
      // 获取当前rect的父节点，再找到它在兄弟节点中的位置
      const parentNode = this.parentNode;
      const parentIndex = Array.prototype.indexOf.call(parentNode.parentNode.children, parentNode);
      console.log("父元素索引：", parentIndex);
      // 你的其他逻辑...
    });
}

另外提醒一下：你原来用全局变量IndexA、IndexB来计数的方式很容易出问题——如果后续有数据更新（比如enter/update/exit），全局变量的计数会混乱，建议用上面两种方法来获取索引更可靠。

内容的提问来源于stack exchange，提问作者nat1993