30

イベントが進行中の場合、d3.event.xは、マウスクリックのx座標の位置を示しますが、HTMLドキュメント全体を基準にしています。jQueryの$（'svg'）。position（）を使用してsvgの実際の位置を取得しようとしましたが、これは明らかに誤った値を返します。

私が見落としているページに対するsvgの位置を見つける簡単な方法はありますか？ちなみに、jQueryの問題があいまいなブラウザエラーである場合に備えて、私はChromeを使用しています。

編集：私はこれをFirefoxでチェックし、$（'svg'）。position（）は正しい座標を返します。？！？

4

1 に答える 1

57

ブラウザのネイティブイベントであるd3.eventを使用する代わりに、d3.mouseを使用して、コンテナに関連する座標を取得します。例えば：

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);

var rect = svg.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .on("mousemove", mousemove);

function mousemove(d, i) {
  console.log(d3.mouse(this));
}
于 2012-04-20T16:01:50.530 に答える