web-dev-qa-db-ja.com

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

D3を使用して散布図を描画しています。ユーザーが各円上にマウスを置いたときにツールチップを表示したいと思います。

私の問題は、ツールチップを追加できることですが、それらはマウスイベント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/

マウスの位置ではなく、ツールチップの方向を決める位置として円自体の中心を使用する方法はありますか？

javascriptd3.jstooltip
39
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");
29
Lars Kotthoff

何かを見つけました こちら たとえ<body>および<svg>位置が異なります。これは、ツールチップに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");
})
15
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");})
0
timemirror