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的实际位置,但这个返回值是非常不合理的值。
找到一个svg相对于我俯瞰的页面的位置?我使用Chrome,顺便说一下,如果jQuery问题是一个模糊的浏览器错误。
编辑:我检查了在firefox和$('svg')。 position()返回正确的坐标。
不要使用 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));
}
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.
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.
EDIT: I checked this in firefox and $('svg').position() returns the correct coordinates. ?!?
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屋!