javascript - 如何使我的文本保留变量编号而不是 javascript D3 中的引用？

Question

每当我将鼠标悬停在 svg 元素上时，我都会运行一个工具提示。

我已将代码添加到经过 i 次迭代的循环中:

.on("mouseover", function(d){return tooltip.style("visibility", "visible")
                .text(d["GEO/ACL00"] + " " + d[headers[i]]);})

但它不保留 i 的值，它只引用 i。一旦鼠标悬停在上面，循环就已经结束，i 是循环的最后一个值。

例如，如何让它查找 d[headers[24]] 而不是 d[headers[i]]？

Answer 1

如果要使用索引，则必须在匿名函数中设置第二个参数(传统上称为i，用于index):

selection.on("mouseover", function(d, i){
    //second parameter ---------------^
    //code here
})

这是一个演示，将鼠标悬停在圆圈上:

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

var circles = svg.selectAll("foo")
  .data(d3.range(10))
  .enter()
  .append("circle")
  .attr("cy", 30)
  .attr("cx", function(d){ return 30 + 25 * d})
  .attr("fill", "teal")
  .attr("r", 10);
  
circles.on("mouseover", function(d,i){
  console.log("This is circle index " + i)
})

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