46

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/

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

4

4 に答える 4

32

特定のケースでは、単に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-27T20:55:24.000 に答える
0

私は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-07T00:36:10.717 に答える