d3アニメーションスパークライングラフの値をツールチップに表示するには？

Question

スパークライン上にマウスを重ねると、ツールヒントに配列の値を表示します。私は適合コードを持っていますhttp://bl.ocks.org/benjchristensen/1148374

sparklineにマウスオーバーすると、配列の値をツールチップに表示するコードを追加しましたが、最初のインデックス値のみを表示しています。この特定の例では

var tooltip = d3.select(id) 
    .append("div") 
    .attr("id","toolTip"+toolTipId) 
    .style("position", "absolute") 
    .style("z-index", "10") 
    .style("visibility", "hidden") 
    .style("background", "#6a7883") 
    .style("color", "white") 
    .style("height", "20px") 
    .style("width", toolTipWidth) 
    .style("text-align", "center") 
    .style("font-size", "11px") 
    .text("a simple tooltip"); 
    d3.select(id+" svg path") 
    .data(arr)  
    .on("mouseover", function(d,i){tooltip.text(msgToolTipPrefix+" "+arr[i]+""+msgToolTipPostfix); return tooltip.style("visibility", "visible");}) 
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) 
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");}); 

Answer 1

ラインは、ただ1つのSVGパス（DOMエレメント）で表されます。 D3はデータをDOM要素にバインドし、パスセグメントにバインドしません。そのため、常に同じデータが表示されます。

（this blockのような）別々のホバーブルセグメントに分割することができます。結果として、マウスイベントがバインドされたSVGパスの配列が得られます。あなたのツールチップのコードが微調整して使用することができます。

path 
 
    .on("mouseover", function(d) { tooltip.text("Hello "+d[0][1]+ "."); return tooltip.style("visibility", "visible");}) 
 
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) 
 
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

D3はしないだろう、あなたは私の知る限り、マウスイベントに応じたYデータを補間する場合がありますのでご注意くださいそれは自動的に（そして私はスプライン補間のようなものが線のレンダリングに使用されるときにそれを行う方法を知らない）。