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));
}