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屋！