javascript - d3 点击坐标是相对于页面而不是 svg - 如何翻译它们（Chrome 错误）

Question

当一个事件正在播放时，d3.event.x 给出鼠标点击的 x 坐标位置，但相对于整个 HTML 文档。我尝试使用 jQuery 的 $('svg').position() 来获取 svg 的实际位置，但这会返回明显错误的值。

有没有一些简单的方法可以找到 svg 相对于我正在忽略的页面的位置？顺便说一句，我正在使用 Chrome，以防 jQuery 问题是一个晦涩的浏览器错误。

编辑：我在 Firefox 中检查了这个并且 $('svg').position() 返回了正确的坐标。？！？

Answer 1

不要使用浏览器的原生事件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));
}