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

Question

我试图在鼠标悬停时访问形状的数据索引，以便我可以根据索引控制形状的行为。

假设此代码块根据一些数据在垂直线上布置了 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");

当我们将鼠标悬停在矩形 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 重叠。

那么有没有办法在我的鼠标悬停事件中检测“this”矩形的数据索引“i”，以便我可以实现一些逻辑来相应地调整另一个矩形的 translate()？

Answer 1

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

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

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

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

...然后，在内部匿名函数中，再次获取索引，使用不同的参数名称，比较它们:

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

这是一个简单的演示(充满了魔法数字)，只是为了向您展示如何去做:

var svg = d3.select("svg");

var data = d3.range(5);

var groups = svg.selectAll("foo")
  .data(data)
  .enter()
  .append("g");

var rects = groups.append("rect")
  .attr("y", 10)
  .attr("x", function(d) {
    return 10 + d * 20
  })
  .attr("width", 10)
  .attr("height", 100)
  .attr("fill", "teal");

groups.on("mouseover", function(d, i) {
  d3.select(this).select("rect").transition()
    .attr("width", 50);

  groups.transition()
    .attr("transform", function(e, j) {
      if (i < j) {
        return "translate(40,0)"
      }
    })
}).on("mouseout", function() {
  groups.transition().attr("transform", "translate(0,0)");
  rects.transition().attr("width", 10);
})

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

PS:不要做...

g_box.selectAll("rect").on("mouseover", function(d, i){

... 因为那样你不会得到正确的索引(这解释了 your comment )。取而代之的是，将事件附加到组，并在其中获取矩形。