Javascript D3 svg路径重叠

我想知道是否有人可以提供我遇到的任何建议，路径似乎相互重叠，从而不允许其他路径悬停或单击

我修改了它们在地图上的放置顺序，以便“覆盖”路径在DOM中处于领先位置，但我仍然经历了奇怪的结果，即最初覆盖较小路径的路径似乎可以在比其自身路径大得多的区域中悬停/单击

下面是一个我认为有助于更好地解释我在live中遇到的例子：

如果你看一看最右边的蓝色小道“Pushover”，你就会明白我的意思。将鼠标悬停在轨迹上，然后将指针从轨迹上向左和向下移动，它仍然可以悬停在远远超出路径范围的地方

---

不确定如何解决此类问题。

SVG路径的哪些部分可以成为指针事件（即鼠标单击）的目标，由属性值定义。从链接到的站点查看代码可以很容易地看到，对于路径，属性设置为

all

.TrailMap-view .scene { pointer-events:all }

该值的定义如下：

全部
当指针位于图元的内部（即填充）或周长（即笔划）上方时，图元只能成为鼠标事件的目标。和属性的值不影响事件处理

这意味着，这些路径的内部将成为鼠标事件的合法目标，即使它们肉眼看不见。由于您只希望路径的笔划触发鼠标事件，因此只需将

指针事件

属性设置为：

• stroke

  当指针超过元素的周长（即笔划）时，元素只能成为鼠标事件的目标。和属性的值不影响事件处理

• visibleStroke

  只有当属性设置为“可见”且鼠标光标位于元素的周长（即笔划）上时，元素才能成为鼠标事件的目标。该属性的值不影响事件处理

---

她是你的朋友。如果我将该属性添加到

.TrailMap view path

中，则只有笔划本身将成为指针事件的目标。@altocumulus将此作为答案发布。是的，如果您将此作为答案发布，我将其标记为正确