Bagaimana untuk Mengakses Nod Datum pada Mouseover dalam D3 v6?

Tidak Dapat Mendapatkan Nod Datum pada Mouseover dalam D3 v6

Masalah:

Dalam D3 v6, apabila menggunakan selection.on() untuk menambah pendengar acara alih tetikus pada nod, data peristiwa dikembalikan dan bukannya datum nod. Bagaimanakah datum boleh diperolehi?

Jawapan:

D3v5 dan Terdahulu:

Dalam D3 v5 dan sebelumnya, corak berikut digunakan untuk mentakrifkan pendengar acara:

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

Di mana d ialah datum elemen yang mencetuskan peristiwa, i ialah indeksnya dan nod ialah kumpulan unsur semasa. Maklumat acara boleh diakses dengan d3.event.

D3v6:

Dalam D3 v6, corak pendengar acara telah bertukar kepada:

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

Kini, acara itu dihantar terus sebagai parameter pertama kepada pendengar, manakala datum ialah parameter kedua. d3.event telah dialih keluar.

Menggunakan d3.select(this)

Dalam fungsi event listener, d3.select(this) masih boleh digunakan untuk memilih elemen pencetus, walaupun dalam D3 v6. Walau bagaimanapun, apabila menggunakan fungsi anak panah, ini akan mempunyai skop yang berbeza.

Kedudukan:

Untuk mendapatkan kedudukan x,y acara, yang sebelum ini diambil dengan d3.mouse(this), anda kini boleh menggunakan d3.pointer(event). Untuk mengakses sifat x dan y secara langsung, gunakan event.x dan event.y bukannya d3.event.x dan d3.event.y.

Contoh:

Contoh berikut menunjukkan cara untuk menghantar acara dan datum kepada fungsi pendengar acara dalam D3 v6:

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

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