Wie erhalte ich das Knotendatum bei Mouseover-Ereignissen in D3 v6?

In D3 v6: So ermitteln Sie das Knotendatum bei Mouseover-Ereignissen

In D3 v6 und höher: Abrufen des gebundenen Datums eines Knotens mit Auswahl. on() unterscheidet sich von früheren Versionen. Anstatt die Mausereignisdaten zu empfangen, wird das Datum zum zweiten Parameter, der an den Ereignis-Listener übergeben wird.

D3v5 und früher

Zuvor folgten Ereignis-Listener in D3 diesem Muster :

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

wobei:

• d das Datum des ereignisauslösenden Elements ist
• i sein Index ist
• Knoten ist die aktuelle Gruppe ausgewählter Elemente

Ereignisbezogene Daten konnten mit d3.event abgerufen werden.

D3v6

Mit D3v6 hat sich das Muster geändert zu:

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

Jetzt wird das Ereignisobjekt direkt als erster Parameter übergeben, während das Datum der zweite Parameter ist. d3.event ist daher veraltet.

Auf das Datum zugreifen

So rufen Sie das Datum des Mouseover-Ziels ab:

node.on("mouseover", (event, d) => { 
    console.log(d); 
});

Ereignisposition bestimmen

In D3v5 könnten Sie d3.mouse(this) verwenden, um die x-, y-Position des Ereignisses zu ermitteln. Verwenden Sie in D3v6:

d3.pointer(event);

Beispiel

Das folgende Beispiel zeigt das Abrufen des Datums und der Ereignisposition während eines Mouseover-Ereignisses:

const data = [
    {
        "id": "Myriel",
        "group": 1
    }, 
    {
        "id": "Napoleon",
        "group": 1
    }
];

const nodes = svg.append("g")
    .selectAll("circle")
    .data(data)
    .join("circle")
    ...;

node.on("mouseover", (event, d) => {
    console.log(d.id); 
    console.log(d3.pointer(event));
});

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