如何使我的文本保持变量数而不是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 ，用于索引 ）：

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>