Bagaimanakah Pendengar Acara Berubah dalam D3 v6 dan Seterusnya?

Memahami Pendengar Acara dalam D3 v6

Dalam D3, pendengar acara digunakan untuk mencetuskan tindakan apabila peristiwa tertentu berlaku pada elemen. Apabila bekerja dengan elemen terikat data, adalah penting untuk mengakses data yang berkaitan semasa pengendalian acara. Di sinilah perubahan dalam corak pendengar acara antara D3 v5 dan D3 v6 dimainkan.

D3 v5 dan Terdahulu

Dalam D3 versi 5 dan lebih awal, perkara berikut corak telah digunakan:

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

Di sini, d mewakili datum unsur yang mencetuskan peristiwa, i ialah indeksnya dan nod ialah kumpulan unsur semasa. Maklumat acara boleh diakses dalam pendengar acara menggunakan d3.event.

D3 v6 dan Beyond

Dalam D3 v6, corak telah diubah suai kepada:

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

Kini, acara dihantar terus kepada pendengar sebagai parameter pertama, dan datum ialah parameter kedua. Akibatnya, pembolehubah global d3.event telah dialih keluar.

Mengakses Datum

Untuk mendapatkan semula datum terikat nod yang mencetuskan peristiwa dalam D3 v6 , hanya gunakan parameter d dalam fungsi pendengar acara. Ini ditunjukkan dalam kod yang diperbetulkan di bawah:

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

Perubahan Penting Lain

• ini: Anda masih boleh menggunakan d3. pilih(ini) untuk mengakses elemen semasa dalam fungsi pendengar acara, tetapi skopnya mungkin berbeza apabila menggunakan fungsi anak panah.
• Kedudukan: Untuk mendapatkan kedudukan x dan y acara pencetus berbanding SVG, gunakan d3.pointer(event) dan bukannya d3.mouse(this).
• Properties Event: Events kini mendedahkan sifatnya secara langsung dan bukannya melalui d3.event. Contohnya, event.x dan event.y menggantikan d3.event.x dan d3.event.y.

Atas ialah kandungan terperinci Bagaimanakah Pendengar Acara Berubah dalam D3 v6 dan Seterusnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!