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

Get coordinates of mouse click on svg using d3

本文关键字：svg 坐标 d3 获取 鼠标 使用      更新时间：2023-09-26

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

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

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

所以我尝试了：

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

我收到错误：

未捕获的类型错误： 无法读取 null 的属性"源事件"

我也试过：

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

我得到同样的错误。

当我尝试使用d3.svg.mouse(this)时，出现错误：

未

捕获的类型错误：未定义不是函数

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

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

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

是时候在这里更新了？使用 JSv7，我认为这将是等效的代码片段：

svg.on("click", d => console.log([d.clientX, d.clientY]));

最近，d3JS似乎已经直接使用事件发生的节点的ClientX和ClientY属性，而无需任何类型的"鼠标"对象/方法。

相关文章：