Bagaimana untuk Menambah Imej pada Kalangan dalam D3.js Menggunakan Corak?

Kalangan Dipertingkatkan dengan Imej dalam D3: Panduan Komprehensif

Menambah imej pada kalangan dalam D3 boleh dicapai dengan penggunaan corak yang bijak. Pendekatan ini membolehkan visualisasi interaktif, membolehkan imej muncul pada acara alih tetikus.

Menyediakan Corak:

Untuk mencipta corak, gunakan SVG unsur. Dalam ini, tentukan dengan dimensi yang dikehendaki dan berikannya ID. Benamkan imej menggunakan elemen, menyatakan lokasi dan saiznya.

Pelaksanaan D3:

Untuk menggunakan corak pada bulatan, cuma tetapkan atribut isi bulatan kepada ID corak menggunakan url () sintaks. Ini akan menggantikan warna bulatan sedia ada dengan imej yang dipilih.

Contoh Kod:

<svg>

svg.append("circle")
  .attr("class", "logo")
  .attr("cx", 225)
  .attr("cy", 225)
  .attr("r", 20)
  .style("fill", "transparent")
  .style("stroke", "black")
  .style("stroke-width", 0.25)
  .on("mouseover", function () {
    d3.select(this).style("fill", "url(#image)");
  })
  .on("mouseout", function () {
    d3.select(this).style("fill", "transparent");
  });

Dalam kod ini, bulatan pada mulanya mempunyai isian lutsinar . Pada tetikus, isian ditukar kepada corak dengan ID imej, menyebabkan imej muncul dalam kalangan.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Imej pada Kalangan dalam D3.js Menggunakan Corak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!