どのように私のテキストを変数番号を保持し、javascript D3の参照ではないようにするのですか？

Question

私はsvg要素をマウスオーバーするたびに実行されるツールチップを持っています。

私は私の反復を通過し、ループ内のコードを追加しました：

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

をしかし、それは唯一の参照I、iの値を保持しません。マウスがホバーすると、ループはすでに終了しており、iはループの最後の値です。

d [headers [i]]ではなくd [headers [24]]を探す方法を教えてください。

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>