当使用 D3.js 创建 SVG 点击事件时，您可能会注意到 click 事件返回的坐标是相对于整个页面而不是 SVG 元素本身的。这可能会导致错误的结果或无法按预期工作。
这是因为在 Chrome 中，SVG 标签上的 getBoundingClientRect() 方法返回值的 top 和 left 属性是相对于视口而非 SVG 元素本身的。因此，click 事件中的坐标也是相对于视口的。
解决这个问题的方法是，您需要将页面坐标转换为 SVG 坐标。以下是一个例子：
----- --- - ----------------- ----- ---- - ----------------------------------- ----- - - ------------- - ---------- ----- - - ------------- - ---------
在此示例中，我们首先获取 SVG 元素的 DOM 节点，并使用 getBoundingClientRect() 获取其位置和大小。然后，我们通过从 click 事件的 clientX 和 clientY 属性中减去 SVG 元素的左上角位置来计算出 click 事件的 x 和 y 坐标。这样就可以得到相对于 SVG 元素的坐标。
如果您在处理鼠标滚轮事件时遇到相同的问题，还需要进行一些额外的步骤来将页面中心转换为 SVG 中心。以下是一个示例：
----- --- - ----------------- ----- ---- - ----------------------------------- ----- - - ------------- - --------- - ---------- - -- ----- - - ------------- - -------- - ----------- - --
在此示例中，我们首先将页面坐标转换为相对于 SVG 元素的坐标，然后从 SVG 元素的宽度和高度的一半中减去相应的值以得到相对于 SVG 中心的坐标。
希望这些代码可以帮助您解决 D3.js 中 click 和鼠标滚轮事件的坐标问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30014