Событие D3 mousemove зависает над неправильным элементом пути

У меня есть диаграмма 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 и не мог найти никаких логических проблем, поэтому я думаю, что это проблема, связанная с куполом, есть идеи?

введите здесь описание изображения


javascript svg d3.js
person Arkadi    schedule 27.10.2020    source источник
comment
предоставьте в своем вопросе минимально воспроизводимый пример. Вы должны иметь возможность сделать это с помощью фрагментов стека.   -  person Robert Longson    schedule 27.10.2020
comment
Отвечает ли это на ваш вопрос? Соединители аннотаций, блокирующие всплывающие подсказки - это потому, что вы использовали fill: transparent, что дает путям хитбокс, как если бы они были заполнены. Вместо этого используйте fill: none;   -  person Ruben Helsloot    schedule 27.10.2020