SVG-Bogen mit Füllung reagiert nicht auf Schweben

Question

Ich verwende D3.js mit Datamaps.js gewickelt, um eine Karte zu erstellen, die Fluglinien zwischen den Ländern zeigt. Bisher war ich in der Lage, die Karte zu erstellen, einen Bogen in Form eines SVGs zu zeichnen und benutzerdefinierte Plug-in-Funktionen hinzuzufügen, um zu reagieren, wenn ich den Mauszeiger darüber bewege.

Das einzige Problem ist, dass die Hover-Funktion wird ausgelöst, wenn ich die Maus über die Innenseite des Bogens sowie die Grenze:

When my cursor is where the arrow is, the hover bar is triggered.

Ich möchte, dies ändern, so dass die Hover-Bar wird nur ausgelöst, wenn ich den eigentlichen Bogen mause. Ich nehme an, dass dies eine Änderung ist, die ich vornehmen muss, wenn ich das SVG instanziiere, aber wenn ich es mit Datamaps ändern könnte, wäre das noch besser.

Bitte teilen Sie mir mit, wie das möglich sein könnte.

Answer 1

Die Lösung hierfür kann durch einfaches CSS erreicht werden, indem die mit Ihrem Arc SVG verbundenen Zeigerereignisse geändert werden. Unter der Annahme, Elemente Ihres SVG-Pfad hat eine Klasse wie „Datenzuordnungen-Bogen“, indem die folgenden Zeilen Code zu Ihrem CSS soll das Problem beheben:

.datamaps-arc { 
    pointer-events:visibleStroke; 
} 

Lesen Sie mehr darüber, wie Zeiger Ereignis Ziele für SVGs here zu manipulieren.