So erhalten Sie das Knotendatum bei Mouseover in D3 v6

Knotendatum kann bei Mouseover in D3 v6 nicht abgerufen werden

In D3 v6 hat der Ereignisverarbeitungsmechanismus im Vergleich zu früheren Versionen erhebliche Änderungen erfahren. Dieser Artikel geht auf diese Änderungen ein und bietet Lösungen für ein häufiges Problem, das beim Abrufen des Knotendatums während eines Mouseover-Ereignisses auftritt.

Ereignisbehandlung in D3 v5 und früher

In D3 v5 und früher , folgte das Ereignisbehandlungsmuster diesem Format:

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

Innerhalb der Listener-Funktion stellte d das Datum des auslösenden Elements dar, i war sein Index und nodes war die aktuelle Gruppe von Elementen. Darüber hinaus konnte mit d3.event auf Ereignisinformationen zugegriffen werden.

Ereignisbehandlung in D3 v6

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

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

Hier wird das Ereignis als erster Parameter direkt an den Listener übergeben und das Datum wird zum zweiten Parameter. Infolgedessen wurde d3.event entfernt.

Abrufen des Knotendatums

Um das Knotendatum in D3 v6 abzurufen, können Sie das neue Ereignisbehandlungsmuster verwenden. Das folgende Beispiel zeigt, wie das Mouseover-Ereignis behandelt und auf das Datum zugegriffen wird:

node.on("mouseover", function(event, d) {
  console.log(d.id); // Outputs the id of the node
});

Positionierung und andere Ereigniseigenschaften

Um auf die X- und Y-Position des auslösenden Ereignisses zuzugreifen, verwenden Sie d3. pointer(event) statt d3.mouse(this). Um die x- und y-Eigenschaften zu erhalten, verwenden Sie event.x und event.y anstelle von d3.event.x und d3.event.y.

Zusammenfassung

Die wichtigsten Änderungen in der Ereignisbehandlung in Bei D3 v6 wird das Ereignis als erster Parameter übergeben und event.currentTarget anstelle von d3.select(this) verwendet. Darüber hinaus ersetzt d3.pointer(event) d3.mouse(this) zu Positionierungszwecken. Wenn Sie diese Änderungen verstehen, können Sie Ereignisse in Ihren D3 v6-Anwendungen effektiv verarbeiten.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie das Knotendatum bei Mouseover in D3 v6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!