0

このグループ化された棒グラフD3.js の例を、ユーザーがバーの 1 つにマウスを合わせるたびにツールチップを表示するように調整したいと考えています。

次のように、ユーザーのマウス ポインターを基準にしてツールチップを表示する方法を考え出しました。

var tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 1e-6);
state.selectAll("rect")
  .data(function(d) { return d.ages; })
  ...
  .on("mouseover", function(d, i) {
    tooltip.transition()
      .duration(100)
      .style("opacity", 1);
    tooltip.html("hello world")
     .style("left", x + "px")
     .style("top", y + "px");
  });

// CSS
div.tooltip {
  position: absolute;
  width: 130px;
  height: 60px;
  background: #ddd;
}

しかし、バーが部分的に隠れてしまうため、これは理想的ではありません。代わりに私が本当にやりたいのは、選択したバーの上部にツールチップを表示することです.

マウスの絶対 x/y 座標ではなく、現在マウスオーバーされているブロックの絶対 x/y ピクセル座標を取得する方法を知っている人はいますか? 次に、それらの座標を使用してツールチップを配置できます。

これがjsfiddleの始まりです（ただし、アクセス制御のためにデータをロードできません）：http://jsfiddle.net/YGjHT/1/

4

1 に答える 1

0

四角形を作成している (およびmouseoverハンドラーをアタッチしている) 場合、それらを設定しているので、それらの座標にアクセスできます。必要なのは、ハンドラーでそれらを使用することだけです。ハンドラーで長方形に設定した座標を使用するだけです。

于 2012-11-16T22:32:27.140 に答える