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