Bagaimanakah saya boleh membenamkan imej dalam kalangan menggunakan D3.js?

Memaparkan Imej Dalam Objek Bulatan menggunakan d3.js

Menambah imej dalam objek bulatan menggunakan d3.js boleh dicapai melalui penggunaan corak. Seperti yang ditunjukkan dalam pertanyaan awal, pemaparan ringkas kalangan menggunakan atribut seperti "isi" dan "warna" adalah mudah. Walau bagaimanapun, menggabungkan elemen yang lebih kompleks seperti imej memerlukan pendekatan yang berbeza.

Untuk memaparkan imej dalam bulatan, teg corak digunakan. Teg ini membenarkan takrifan elemen grafik berulang yang boleh digunakan sebagai isian atau lejang. Dalam teg corak, elemen imej ditakrifkan yang menentukan imej yang akan dipaparkan dan kedudukannya.

Di bawah ialah contoh yang menunjukkan penggunaan corak untuk menambah imej pada bulatan:

HTML:

<svg>

d3.js:

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, corak yang ditakrifkan dalam dokumen HTML dirujuk oleh idnya dalam atribut "isi" elemen bulatan. Apabila peristiwa alih tetikus berlaku, isian ditukar kepada url corak, memaparkan imej.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membenamkan imej dalam kalangan menggunakan D3.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!