web-dev-qa-db-ja.com

d3クリック座標はSVGではなくページに関連しています-それらを翻訳する方法（Chromeエラー）

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

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

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

javascriptgoogle-chromesvgclickd3.js
30
ballaw

ブラウザーのネイティブイベントである 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));
}
56
mbostock