如何在D3.js版本4中获取相对于元素原点的(x,y)坐标？

嘿，这个问题我之前也踩过坑！D3 v4确实对鼠标坐标相关的API做了不小的重构，原来v3里顺手的d3.mouse(this)直接用不了，核心原因就是API的参数要求变了。

错误原因解析 #

你碰到的't.getBoundingClientRect is not a function'报错，本质是D3 v4+的d3.mouse()要求传入的必须是真实的DOM元素。如果你的代码里this指向的不是DOM元素（比如用了箭头函数导致上下文改变，或者误传了d3选择集对象），就会触发这个错误。

简便解决方案：用d3.pointer() #

D3 v4专门新增了d3.pointer()方法，完美解决这类相对坐标需求，完全不用手动计算偏移量，用法超直接：

// 给目标元素绑定鼠标移动事件
d3.select(".your-target-element").on("mousemove", function(event) {
  // 获取相对于当前元素左上角的(x, y)坐标
  const [x, y] = d3.pointer(event, this);
  // 这里直接用x和y就可以啦
  console.log("元素相对坐标：", x, y);
});

如果你的代码习惯用箭头函数（这时候this不再指向DOM元素），可以先获取元素的DOM节点再传入：

const targetElement = d3.select(".your-target-element").node();
d3.select(".your-target-element").on("mousemove", (event) => {
  const [x, y] = d3.pointer(event, targetElement);
  console.log("元素相对坐标：", x, y);
});

为什么不推荐继续用d3.mouse()？ #

虽然v4里d3.mouse()还存在，但它的用法限制更多，必须严格传入DOM元素；而d3.pointer()是官方更推荐的新方法，不仅支持鼠标事件，还兼容触摸事件，适用性更广。

内容的提问来源于stack exchange，提问作者Jelmer Dijkstra