javascript - D3 svg 路径重叠

Question

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

我已经修改了它们在 map 上的放置顺序，以便“覆盖”路径在 DOM 中位于前面，但我仍然遇到了奇怪的结果，其中最初覆盖较小路径的路径似乎在比自己的路径大得多的区域中可悬停/可点击。

我认为这将有助于更好地解释我在现场遇到的一个例子:

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

如果您查看最右侧名为“Pushover”的蓝色轨迹，您就会明白我的意思。将鼠标悬停在路径上并将指针从其向左和向下移动，它仍然可以悬停在路径延伸之外的远处。

不知道如何解决此类问题。

Answer 1

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

设置为 all

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

该值的定义如下:

all
The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke and visibility attribute do not affect event processing.

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

• 中风

  The element can only be the target of a mouse event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke and visibility attribute do not affect event processing.

• visibleStroke

  The element can only be the target of a mouse event when the visibility attribute is set to visible and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke attribute does not affect event processing.