d3 点击坐标相对于页面而不是 svg - 如何翻译它们(Chrome 错误) [英] d3 click coordinates are relative to page not svg - how to translate them (Chrome error)

问题描述

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

When an event is in play, d3.event.x gives the position of the x coordinate of the mouse click, but relative to the entire HTML doc. I tried using jQuery's $('svg').position() to get the actual position of the svg but this return blatantly fallacious values.

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

Is there some easy way to find the position of an svg relative to the page that I am overlooking? I am using Chrome, by the way, in case the jQuery problem is an obscure browser error.

我在 Firefox 中检查了这个，$('svg').position() 返回正确的坐标.?!?

I checked this in firefox and $('svg').position() returns the correct coordinates. ?!?

推荐答案

而不是使用 d3.event 是浏览器的原生事件，使用 d3.鼠标 获取相对于某个容器的坐标.例如:

Instead of using d3.event, which is the browser's native event, use d3.mouse to get the coordinates relative to some container. For example:

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

这篇关于d3 点击坐标相对于页面而不是 svg - 如何翻译它们(Chrome 错误)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！