Wie haben sich Ereignis-Listener in D3 v6 und höher verändert?

Ereignis-Listener in D3 v6 verstehen

In D3 werden Ereignis-Listener verwendet, um Aktionen auszulösen, wenn bestimmte Ereignisse auf Elementen auftreten. Bei der Arbeit mit datengebundenen Elementen ist es wichtig, während der Ereignisbehandlung auf die zugehörigen Daten zuzugreifen. Hier kommt die Änderung des Ereignis-Listener-Musters zwischen D3 v5 und D3 v6 ins Spiel.

D3 v5 und früher

In D3-Versionen 5 und früher gilt Folgendes Muster wurde verwendet:

selection.on("eventType", function(d, i, nodes) { ... })

Hier stellt d ​​das Datum des Elements dar, das das Ereignis auslöst, i ist sein Index und nodes ist die aktuelle Gruppe von Elementen. Auf Ereignisinformationen kann im Ereignis-Listener mithilfe von d3.event zugegriffen werden.

D3 v6 und darüber hinaus

In D3 v6 wurde das Muster wie folgt geändert:

selection.on("eventType", function(event, d) { ... })

Jetzt wird das Ereignis als erster Parameter direkt an den Listener übergeben und das Datum ist der zweite Parameter. Infolgedessen wurde die globale Variable d3.event entfernt.

Zugriff auf das Datum

Um das gebundene Datum des Knotens abzurufen, der das Ereignis in D3 v6 ausgelöst hat verwenden Sie einfach den Parameter d in der Ereignis-Listener-Funktion. Dies wird im korrigierten Code unten demonstriert:

<code class="js">node.on("mouseover", (event, d) => {
    console.log(d.id);
});</code>

Andere bemerkenswerte Änderungen

• dieses: Sie können d3 weiterhin verwenden. Wählen Sie (dies) aus, um auf das aktuelle Element innerhalb der Ereignis-Listener-Funktion zuzugreifen, aber sein Umfang kann bei Verwendung von Pfeilfunktionen unterschiedlich sein.
• Positionierung: Um die x- und y-Positionen des auslösenden Ereignisses zu erhalten Verwenden Sie im Vergleich zum SVG d3.pointer(event) anstelle von d3.mouse(this).
• Ereigniseigenschaften: Ereignisse legen ihre Eigenschaften jetzt direkt und nicht über d3.event offen. Beispielsweise ersetzen event.x und event.y d3.event.x und d3.event.y.

Das obige ist der detaillierte Inhalt vonWie haben sich Ereignis-Listener in D3 v6 und höher verändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!