使用d3获取鼠标点击svg的坐标

Question

我想在矩形svg上点击鼠标的坐标。我正在尝试将鼠标点击坐标打印到控制台。

我可以使用pageX和pageY来获取坐标，但这是整个页面的坐标。我只需要svg内的坐标。

我正在使用d3.v3.min.js

所以我试过了：

$(document).mousedown(function () {
     console.log(d3.mouse(this));
});

我收到错误：

  

未捕获的TypeError：无法读取null

的属性'sourceEvent'

我也尝试过：

$(document).mousedown(function () {
     console.log(d3.mouse(document.getElementById("svg_id")));
});

我得到了同样的错误。

当我尝试d3.svg.mouse(this)时，我收到错误：

  

未捕获的TypeError：undefined不是函数

如何获取svg中的点击坐标以及为什么这些d3.mouse()函数不起作用？

Answer 1

您的代码的问题在于您使用jQuery事件处理而不是D3事件处理。您需要以下内容：

var svg = d3.select("svg");
svg.on("click", function() {
    console.log(d3.mouse(svg.node));
})