Bagaimana untuk Mengisi Bulatan D3.js dengan Imej?

Bagaimana untuk Membenamkan Imej Dalam Objek Bulatan dalam JavaScript D3?

Dalam JavaScript D3, menambah imej di dalam objek bulatan sedia ada memerlukan pendekatan yang lebih bernuansa daripada hanya menggunakan atribut "isi" atau "warna". Apabila menggunakan imej, kaedah "tambah('imej')" tidak berfungsi seperti yang diharapkan.

Penyelesaian: Menggunakan Corak

Untuk menyelesaikan isu ini, Lars menunjukkan keperluan untuk mewujudkan corak. Pautan berikut menyediakan perbincangan yang bernas mengenai perkara ini di forum kumpulan Google d3: [Perbincangan Kumpulan Google D3](https://groups.google.com/g/d3-js/c/TPkAqJjjlks).

Pelaksanaan

Coretan kod berikut menyediakan corak dalam SVG elemen:

<svg>

Dalam skrip D3, atribut "isi" dilaraskan seperti berikut:

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

Dengan cara ini, bulatan akan dipenuhi dengan imej apabila tetikus.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Bulatan D3.js dengan Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!