在 D3 中，我们经常需要获取用户的鼠标位置。比如，当用户鼠标移到某个元素上时，我们可能会想要显示一个工具提示，这时候就需要知道鼠标的坐标。
获取鼠标位置
D3 提供了 d3.event 对象来访问当前事件的信息，包括鼠标位置。如果你想获取鼠标相对于某个元素的位置，可以使用以下代码：
const [x, y] = d3.pointer(event);
其中 event 是触发事件的对象，比如事件处理函数中的 d3.event 或者 DOM 元素上的事件监听器中的 event。d3.pointer 方法返回一个包含鼠标相对于给定元素的 x 和 y 坐标的数组。
如果你想获取鼠标相对于整个页面的位置，可以使用以下代码：
const [x, y] = d3.pointer(event, window);
这里的第二个参数是可选的，用于指定参考元素。如果不指定，默认为当前元素的祖先元素中最近的带有定位的元素（如果没有，则为文档根元素）。
示例代码
下面是一个简单的示例，演示如何在 D3 中获取鼠标位置并在 SVG 中绘制一个圆。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ----- ----------------
------- ---------------------------------------------
-------
------
---- ----------- -------------------
--------
----- --- - -----------------
------------------- ---------- -
----- --- -- - ------------------
---------------------------------
--------------------
----------- --
----------- --
---------- ---
-------------- --------
---
---------
-------
-------这个示例中，我们在 SVG 上注册了 mousemove 事件处理函数，在每次鼠标移动时获取鼠标位置并在 SVG 中绘制一个蓝色的圆。
总结
在 D3 中获取鼠标位置非常简单，只需要使用 d3.pointer 方法即可。但是需要注意的是，如果你要获取鼠标相对于某个元素的位置，那么这个元素必须是当前元素的后代元素。同时，也要注意参考元素的选取，以免出现意料之外的结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28038