D3 Click 坐标相对于页面而非 SVG，如何进行转换（Chrome 错误）

当使用 D3.js 创建 SVG 点击事件时，您可能会注意到 click 事件返回的坐标是相对于整个页面而不是 SVG 元素本身的。这可能会导致错误的结果或无法按预期工作。

这是因为在 Chrome 中，SVG 标签上的 getBoundingClientRect() 方法返回值的 top 和 left 属性是相对于视口而非 SVG 元素本身的。因此，click 事件中的坐标也是相对于视口的。

解决这个问题的方法是，您需要将页面坐标转换为 SVG 坐标。以下是一个例子：

const svg = d3.select('svg');
const rect = svg.node().getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;

在此示例中，我们首先获取 SVG 元素的 DOM 节点，并使用 getBoundingClientRect() 获取其位置和大小。然后，我们通过从 click 事件的 clientX 和 clientY 属性中减去 SVG 元素的左上角位置来计算出 click 事件的 x 和 y 坐标。这样就可以得到相对于 SVG 元素的坐标。

如果您在处理鼠标滚轮事件时遇到相同的问题，还需要进行一些额外的步骤来将页面中心转换为 SVG 中心。以下是一个示例：

const svg = d3.select('svg');
const rect = svg.node().getBoundingClientRect();
const x = event.clientX - rect.left - rect.width / 2;
const y = event.clientY - rect.top - rect.height / 2;

在此示例中，我们首先将页面坐标转换为相对于 SVG 元素的坐标，然后从 SVG 元素的宽度和高度的一半中减去相应的值以得到相对于 SVG 中心的坐标。

希望这些代码可以帮助您解决 D3.js 中 click 和鼠标滚轮事件的坐标问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30014