Javascript D3鼠标移动事件悬停在错误路径元素上

我有一个带有节点和路径的D3图，当用户选择路径时，它会高亮显示，在大多数情况下，它工作得很好，但有一种情况，当我试图悬停在

1

路径上时，

2

会高亮显示，如图所示

路径在

g

标记中绘制，如下所示：

<g class="links">
    ...
    <path class="link-path" id="explorer1-17" x1="787" y1="506" x2="1251" y2="681" marker-end="..." d="M787,506 1111,681 1251,681" marker-start="..." fill="transparent" style="cursor: pointer; stroke: rgb(18, 217, 47); stroke-width: 1;"></path>
    <path class="link-path" id="explorer1-18" x1="787" y1="496" x2="1251" y2="641.5" marker-end="..." d="M787,496 1111,641.5 1251,641.5" marker-start="..." fill="transparent" style="cursor: pointer; stroke: rgb(18, 217, 47); stroke-width: 2;"></path>
    ...
</g>

...
...

这个问题发生在我将鼠标移近角度时，我调试了整个javascript，没有发现任何逻辑问题，所以我认为这是与穹顶相关的问题，有什么想法吗

---

请在问题中提供答案。您应该能够通过堆栈代码段执行此操作。这是否回答了您的问题这是因为您使用了

fill:transparent

，这给了路径一个hitbox，就像它们被填充一样。使用

填充：无取而代之