Bagaimana untuk Merebut Datum Nod Semasa Acara Tetikus dalam D3 v6?

Dalam D3 v6, Cara Memperoleh Datum Nod Semasa Peristiwa Tetikus

Dalam D3 v6 dan lebih baharu, mendapatkan semula datum terikat nod dengan pemilihan. on() berbeza daripada versi sebelumnya. Daripada menerima data peristiwa tetikus, datum menjadi parameter kedua yang diserahkan kepada pendengar acara.

D3v5 dan Terdahulu

Sebelum ini, pendengar acara dalam D3 mengikut corak :

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

di mana:

• d ialah datum elemen pencetus peristiwa
• i ialah indeksnya
• nod ialah kumpulan semasa daripada elemen terpilih

Data berkaitan peristiwa boleh diakses menggunakan d3.event.

D3v6

Dengan D3v6, corak telah berubah kepada:

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

Kini, objek acara diteruskan secara langsung sebagai parameter pertama, manakala datum ialah parameter kedua. d3.event telah ditamatkan akibatnya.

Mengakses Datum

Untuk mendapatkan semula datum sasaran tetikus:

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

Menentukan Kedudukan Acara

Dalam D3v5, anda boleh menggunakan d3.mouse(this) untuk mendapatkan kedudukan x,y acara. Dalam D3v6, gunakan:

d3.pointer(event);

Contoh

Contoh berikut menunjukkan mendapatkan datum dan kedudukan peristiwa semasa acara alih tetikus:

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));
});

Atas ialah kandungan terperinci Bagaimana untuk Merebut Datum Nod Semasa Acara Tetikus dalam D3 v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!