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

Question

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

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

编辑:我在 firefox 中检查过这个并且 $('svg').position() 返回正确的坐标。 ？!？

Answer 1

而不是使用 d3.event ，这是浏览器的 native 事件，使用 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));
}