D3 svg路径重叠

Question

想知道是否有人可以提供我在路径似乎彼此重叠的地方遇到的任何建议，从而不允许其他路径悬停或点击。

我已经修改了它们放置到地图上的顺序，以便覆盖＆＃39;路径在DOM中领先，但我仍然经历了奇怪的结果，其中最初覆盖较小路径的路径似乎在远大于其自身路径的区域中可以进行/可点击。

我认为有一个例子可以帮助解释我遇到过的更好的事情：

https://www.bromley.com/winter/explore/trail-map/

如果你看一下名为＆＃39; Pushover＆＃39;的最右边的蓝色小道，你会看到我的意思。将鼠标悬停在小道上并将指针向左和向下移动，它仍然可以远远超出路径的延伸范围。

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

Answer 1

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

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

此值的定义如下：

  

所有
  当指针位于元素的内部（即填充）或周边（即笔划）上时，该元素只能是鼠标事件的目标。 fill，stroke和visibility属性的值不会影响事件处理。

这意味着，这些路径的内部将成为鼠标事件的合法目标，即使它们对眼睛不可见。由于您只希望路径的笔划触发鼠标事件，因此您需要做的就是将pointer-events属性设置为：

• stroke

    

  当指针位于元素的周边（即笔划）上时，元素只能是鼠标事件的目标。 stroke和visibility属性的值不会影响事件处理。

• visibleStroke

    

  当visibility属性设置为visible并且鼠标光标位于元素的周边（即笔划）上时，该元素只能是鼠标事件的目标。 stroke属性的值不会影响事件处理。