d3.on("mouseover") Ereignis funktioniert nicht mit verschachtelten SVG-elements
Ich habe einen verschachtelten Satz von Elementen (SVG). Das root-element ist die Grafik, und die Kinder sind die Elemente in der Grafik (Linien, Achsen, etc.). Vereinfachtes Beispiel:
<g transform="translate(80,10)" id="mainGraph">
<g class="Line">
<path d="....."></path>
</g>
</g>
Mein problem ist, dass wenn ich binden einen mouseover/mousemove-Ereignis (mit D3.on("mouseover") zum Beispiel), um die mainGraph element, es nur auslöst wenn ich mit der Maus über eines der untergeordneten Elemente.
Eines der Dinge, die ich lese, ist, dass es Priorität der spätere Elemente, so dass ich Hinzugefügt .Stil("pointer-events","none"), um alle Kind-Elemente, aber das hat nicht funktioniert.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ein Ansatz ist das hinzufügen eines Rechteck füllen die gesamte Oberfläche als das erste element zu fangen, die Maus-Ereignisse, die nicht abgefangen werden, indem Elemente später Hinzugefügt:
Glaube ich, dass die
<g>
element (mainGraph in deinem Beispiel) ist nur ein container, keine eigentliche Form erhalten kann Maus-Ereignisse.Könnten Sie in der Lage sein, die Maus-event-listener auf das svg-element selbst, aber ich glaube nicht, dass die
<g>
arbeiten.g
sollte funktionieren, wenn Sie die Dimensionen ausdrücklich.g
element (im Gegensatz zu einemdiv
) ist nur eine formlose container, und so hat keine Dimensionen. Also, wenn Sie wollen, dass der mouseover-Effekt anwenden, um einen rechteckigen Bereich, in diesem müssen Sie angeben, rechteckig-Inhalt, wie diesrect
. Jedoch, eine nützliche Verbesserung ist mit fill: none " und " pointer-events: alle Stile.path
element innerhalb derg
Verhalten sich die gleiche Weise?Abgesehen von einem
rect
element, sollte es eine CSS-Eigenschaft gesetzt, wie diespointer-events: all;
für die Ereignisse, die ausgelöst werden.pointer-events
ist der Schlüssel, egal ob verschachtelt oder nicht. Der default-Wert wird es nur Ereignisse zulassen, wennvisiblePainted
finden Sie unter developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.Ich habe auch vor die gleichen Probleme.
Die Lösung ist das hinzufügen der css-Eigenschaft parent-element
oder