javascript - 给定位置 (x,y) 获取 SVG 元素的最快方法是什么？

Question

我会用

var element = document.elementFromPoint(x, y);

从原始 SVG 中获取 SVG 元素。但是当运行我的代码时，网络被放置在原始 SVG 之上。所以它返回网络顶点，而不是后面的 svg 元素。

即使我有修改后的和原始的 SVG，从网络中找到每个顶点的 svg 元素的最快方法是什么？

所以我有圆圈(顶点)和背景形状。我需要获取圆(顶点)后面的背景元素。我还有每个顶点的所有 (x,y) 位置。

我看到了这个使用 jquery 的解决方案:

$("svg").find("[x='10'][y='10']");

返回超过这个位置的所有元素。但它看起来在计算上很昂贵，因为我需要在力布局 (d3.js) 的每次交互中为超过 1000 个顶点计算它。力始终处于事件状态，用户需要使用鼠标与顶点进行交互。

这是一个例子:

我想知道每个节点在哪个方格上，我只知道节点位置。

Answer 1

使您希望 elementFromPoint 忽略的元素(即网络)pointer-events="none"