D3.js：マウスの位置ではなく、要素の位置を使用してツールチップを配置しますか？

私は散布図を描画するためにD3を使用しています。ユーザーが各サークルの上にマウスを置くと、ツールチップが表示されます。D3.js：マウスの位置ではなく、要素の位置を使用してツールチップを配置しますか？

私の問題は、ツールチップを追加することができますが、マウスイベントd3.event.pageXとd3.event.pageYを使用して配置されているため、各円に一貫して配置されていません。

代わりに、一部は円の左に少し、右にはいくつかあります - ユーザーのマウスが円にどのように入るかによって異なります。

これは私のコードです：

circles 
    .on("mouseover", function(d) {   
    tooltip.html(d) 
     .style("left", (d3.event.pageX) + "px")  
     .style("top", (d3.event.pageY - 28) + "px");  
    })     
    .on("mouseout", function(d) {  
    tooltip.transition().duration(500).style("opacity", 0); 
    });

、問題を示すJSFiddleです：http://jsfiddle.net/WLYUY/5/

は、私がツールチップを配向させる位置として、円自体の中心を使用することができますいくつかの方法があり、マウスの位置ではありませんか？あなたの特定のケースで

出典

2013-04-27 Richard

あなたがツールチップのいずれかの種類で[OK]をしている場合は、[この回答]（http://stackoverflow.com/questions/10805184/d3-show-data-on-mouseover-of-circle/10806220# 10806220）が役立つはずです。 –

ありがとう！可能であれば、ちょっとしたことではなく、純粋なD3ツールチップを使用する方がいいです。 – Richard

あなたは、単にツールチップを配置するdを使用することができ、すなわち

tooltip.html(d) 
    .style("left", d + "px")  
    .style("top", d + "px");

は、あなたがマウスオーバーされている要素を選択した位置にその座標を取得することができ、これはもう少し一般的なようにするには、ツールヒント、すなわち

tooltip.html(d) 
    .style("left", d3.select(this).attr("cx") + "px")  
    .style("top", d3.select(this).attr("cy") + "px");

出典

2013-04-27 20:55:24

ありがとうございます - 'd3.select（this）.attr（" cx "）'が ''と ' Richard

を参照してください。他のコンテンツがある場合は、その位置にSVGのオフセットを追加する必要があります。http://jsfiddle.net/WLYUY/7/ –

オフセットは私のために働いた。 Larsに感謝します。今私は、ブートストラップの列グリッド内の視覚化を使用しますが、オフセットは新しい配置の影響を受けません。これをどうすれば解決できますか？ –

<body>と<svg>は異なる位置づけを持っていても、あなたの問題を解決することがあります何かhereを見つけました。これはあなたのツールチップにabsoluteの位置が設定されていることを前提としています。

.on("mouseover", function(d) { 
    var matrix = this.getScreenCTM() 
     .translate(+ this.getAttribute("cx"), + this.getAttribute("cy")); 
    tooltip.html(d) 
     .style("left", (window.pageXOffset + matrix.e + 15) + "px") 
     .style("top", (window.pageYOffset + matrix.f - 30) + "px"); 
})

出典

2014-06-04 15:48:57 Boxuan

素晴らしい。それは私のためにうまくいった... –

ちょうど私が必要なもの。ありがとう！ –

私は、これは散布のために動作しない場合がありD3に新たなんだ...しかし、バーチャートのために働くように見える見つけ... v1とv2がプロットされている値です。..そして、それが思わデータ配列から値を参照してください。

.on("mouseover", function(d) { 
        divt .transition() 
         .duration(200) 
         .style("opacity", .9); 
        divt .html(d.v1) 
         .style("left", x(d.v2)+50 + "px") 
         .style("top",y(d.v1)+ "px");})

出典

2016-02-07 00:36:10 timemirror

D3.js：マウスの位置ではなく、要素の位置を使用してツールチップを配置しますか？

答えて

関連する問題