Ich habe einen verschachtelten Satz von Elementen (SVG). Das Wurzelelement ist das Diagramm und die untergeordneten Elemente sind Elemente im Diagramm (Linien, Achsen usw.). Vereinfachtes Beispiel:
%Vor%Mein Problem ist, dass wenn ich ein mouseover / mousemove-Ereignis (zB mit D3.on ("mouseover") an das mainGraph-Element bind, es nur auslöst, wenn ich die Maus über eines der untergeordneten Elemente bewege.
Eines der Dinge, die ich gelesen habe, ist, dass es eine höhere Priorität für spätere Elemente gibt, also habe ich .style ("pointer-events", "none") allen untergeordneten Elementen hinzugefügt, aber das hat nicht funktioniert.
Ein Ansatz besteht darin, ein Rechteck einzufügen, das die gesamte Oberfläche als erstes Element füllt, um Mausereignisse einzufangen, die nicht von später hinzugefügten Elementen abgefangen werden:
%Vor% Ich glaube, das Element <g> (mainGraph in Ihrem Beispiel) ist nur ein Container und keine tatsächliche Form, die Mausereignisse empfangen kann.
Sie können möglicherweise den Maus-Ereignis-Listener auf dem SVG-Element selbst hinzufügen, aber ich denke nicht, dass <g> funktioniert.
Tags und Links javascript svg events d3.js mouse