Wie greife ich beim Mouseover in D3 v6 auf das Knotendatum zu?

Knotendatum kann bei Mouseover in D3 v6 nicht abgerufen werden

Problem:

In D3 In Version 6 werden bei Verwendung von Selection.on() zum Hinzufügen eines Mouseover-Ereignis-Listeners zu Knoten die Ereignisdaten anstelle des Datums des Knotens zurückgegeben. Wie kann das Datum erhalten werden?

Antwort:

D3v5 und früher:

In D3 v5 und früher ist die Das folgende Muster wurde verwendet, um einen Ereignis-Listener zu definieren:

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

Wobei d das Datum des Elements ist, das das Ereignis auslöst, i sein Index und Knoten die aktuelle Gruppe von Elementen. Auf Ereignisinformationen kann mit d3.event zugegriffen werden.

D3v6:

In D3 v6 hat sich das Ereignis-Listener-Muster geändert in:

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

Jetzt wird das Ereignis direkt als erster Parameter an den Listener übergeben, während das Datum der zweite Parameter ist. d3.event wurde entfernt.

Verwendung von d3.select(this)

In der Event-Listener-Funktion kann d3.select(this) weiterhin zum Auswählen verwendet werden das auslösende Element, auch in D3 v6. Bei Verwendung von Pfeilfunktionen hat dies jedoch einen anderen Geltungsbereich.

Positionierung:

Um die x-, y-Position des Ereignisses zu erhalten, die zuvor mit abgerufen wurde d3.mouse(this) können Sie jetzt d3.pointer(event) verwenden. Um direkt auf die x- und y-Eigenschaften zuzugreifen, verwenden Sie event.x und event.y anstelle von d3.event.x und d3.event.y.

Beispiel:

Das folgende Beispiel zeigt, wie das Ereignis und das Datum an eine Ereignis-Listener-Funktion in D3 v6 übergeben werden:

const svg = d3
  .select("body")
  .append("svg");

svg
  .selectAll("rect")
  .data([1, 2, 3])
  .enter()
  .append("rect")
  .attr("width", 30)
  .attr("height", 30)
  .attr("x", function (d) {
    return d * 50;
  })
  .on("click", function (event, d) {
    console.log(d);
    console.log(d3.pointer(event));
  });

Das obige ist der detaillierte Inhalt vonWie greife ich beim Mouseover in D3 v6 auf das Knotendatum zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!