D3.js获取鼠标悬停事件形状的数据索引

我试图在鼠标上方访问形状的数据索引，以便根据索引控制形状的行为

假设这段代码根据一些数据在垂直线上排列了5个矩形

var g_box = svg
      .selectAll("g")
      .data(controls)
      .enter()
      .append("g")
      .attr("transform", function (d,i){
        return "translate("+(width - 100)+","+((controlBoxSize+5)+i*(controlBoxSize+ 5))+")"
      })
      .attr("class", "controls");

    g_box
      .append("rect")
      .attr("class", "control")
      .attr("width", 15)
      .attr("height", 15)
      .style("stroke", "black")
      .style("fill", "#b8b9bc");

当我们将鼠标移到rect 3上时，它会变为两倍大小

g_box.selectAll("rect")
  .on("mouseover", function(d){
      d3.select(this)
        .transition()
        .attr("width", controlBoxSize*2)
        .attr("height", controlBoxSize*2);
      var additionalOffset = controlBoxSize*2;
      g_box
        .attr("transform", function (d,i){
          if( i > this.index) {       // want to do something like this, what to use for "this.index"?
          return "translate("+(width - 100)+","+((controlBoxSize+5)+i*(controlBoxSize+5)+additionalOffset)+")"
          } else {
          return "translate("+(width - 100)+","+((controlBoxSize+5)+i*(controlBoxSize+5))+")"
          }
        })
    })

我想做的是在鼠标上移动矩形4和5，这样它们就滑出了轨道，并且不会重叠正在扩展的矩形3

---

那么，有没有一种方法可以在我的mouseover事件中检测“this”rect的数据索引“i”，这样我就可以实现一些逻辑来相应地调整另一个rect的translate（）

所以试试看

.on("mouseover", function(d,i)

其中i是索引

你也可以看看我几个月前做的一把小提琴，它和你的要求有关

---

您可以使用匿名函数的第二个参数轻松获取任何选择的索引

然而，这里的问题是，您试图在事件处理程序内部的匿名函数中获取索引，这是行不通的

因此，在事件处理程序中获取索引

selection.on("mouseover", function(d, i) {
    //index here ---------------------^

。。。在内部匿名函数中，使用不同的参数名再次获取索引，并进行比较：

innerSelection.attr("transform", function(e, j) {
    //index here, with a different name -----^

这是一个简单的演示（充满神奇的数字），只是为了向您展示如何做到这一点：

var svg=d3.选择（“svg”）；
var数据=d3.范围（5）；
var groups=svg.selectAll（“foo”）
.数据（数据）
.输入（）
.附加（“g”）；
var rects=groups.append（“rect”）
.attr（“y”，10）
.attr（“x”，函数（d）{
返回10+d*20
})
.attr（“宽度”，10）
.attr（“高度”，100）
.attr（“填充”、“teal”）；
组。关于（“鼠标悬停”，函数（d，i）{
d3.select（this.select（“rect”）.transition（）
.attr（“宽度”，50）；
组。转换（）
.attr（“转换”，函数（e，j）{
if（i

这是一个很好的建议，但如果我在该函数中使用console.log（I），则它始终为0。也许这是因为鼠标手柄只拾取鼠标所在的一个形状，所以只有一个项目需要索引？嗯，好的。在enter选择过程中是否可以应用事件侦听器？然后您肯定可以访问索引。是这样的吗？发送到事件处理程序的参数是否已更改？当我读到这篇文章时，它说：“[handler being]传递了当前事件（event）和当前数据（d）”是的，它们改变了。这个答案是3年前的，从那以后有两个主要版本。现在事件处理程序已经更改了，有没有办法获取索引？