Cara Mendapatkan Datum Nod pada Mouseover dalam D3 v6

Tidak Dapat Mendapatkan Datum Nod pada Tetikus dalam D3 v6

Dalam D3 v6, mekanisme pengendalian acara telah mengalami perubahan ketara daripada versi sebelumnya. Artikel ini menyelidiki perubahan ini dan menyediakan penyelesaian kepada isu biasa yang dihadapi semasa cuba mendapatkan semula datum nod semasa acara alih tetikus.

Pengendalian Peristiwa dalam D3 v5 dan Terdahulu

Dalam D3 v5 dan lebih awal , corak pengendalian acara mengikut format ini:

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

Dalam fungsi pendengar, d mewakili datum unsur pencetus, i ialah indeksnya dan nod ialah kumpulan unsur semasa. Selain itu, maklumat acara boleh diakses dengan d3.event.

Pengendalian Acara dalam D3 v6

Dalam D3 v6, corak pengendalian acara telah diubah suai seperti berikut:

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

Di sini, acara akan diluluskan sebagai parameter pertama kepada pendengar secara langsung, dan datum menjadi parameter kedua. Akibatnya, d3.event telah dialih keluar.

Mendapatkan Datum Nod

Untuk mendapatkan semula datum nod dalam D3 v6, anda boleh menggunakan corak pengendalian acara baharu. Contoh berikut menunjukkan cara mengendalikan acara alih tetikus dan mengakses datum:

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

Kedudukan dan Sifat Acara Lain

Untuk mengakses kedudukan x, y acara pencetus, gunakan d3. pointer(event) bukannya d3.mouse(this). Untuk mendapatkan sifat x dan y, gunakan event.x dan event.y dan bukannya d3.event.x dan d3.event.y.

Ringkasan

Perubahan utama dalam pengendalian acara dalam D3 v6 melibatkan menghantar acara sebagai parameter pertama dan menggunakan event.currentTarget dan bukannya d3.select(this). Selain itu, d3.pointer(event) menggantikan d3.mouse(this) untuk tujuan kedudukan. Memahami perubahan ini akan membolehkan anda mengendalikan acara dengan berkesan dalam aplikasi D3 v6 anda.

Atas ialah kandungan terperinci Cara Mendapatkan Datum Nod pada Mouseover dalam D3 v6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!