Wie kann ich mit D3.js Bilder in Kreise einbetten?

Anzeigen von Bildern innerhalb von Kreisobjekten mit d3.js

Das Hinzufügen von Bildern innerhalb eines Kreisobjekts mit d3.js kann durch die Verwendung von erreicht werden Muster. Wie in der ersten Abfrage angegeben, ist die einfache Darstellung von Kreisen mithilfe von Attributen wie „Füllung“ und „Farbe“ unkompliziert. Die Einbindung komplexerer Elemente wie Bilder erfordert jedoch einen anderen Ansatz.

Um ein Bild innerhalb eines Kreises anzuzeigen, wird das Muster-Tag verwendet. Dieses Tag ermöglicht die Definition eines wiederholten grafischen Elements, das als Füllung oder Strich angewendet werden kann. Innerhalb des Muster-Tags wird ein Bildelement definiert, das das anzuzeigende Bild und seine Positionierung angibt.

Unten finden Sie ein Beispiel, das die Verwendung von Mustern zum Hinzufügen eines Bildes zu einem demonstriert Kreis:

HTML:

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

In diesem Code das Muster Auf das im HTML-Dokument definierte Element wird durch seine ID im „fill“-Attribut des Kreiselements verwiesen. Wenn das Mouseover-Ereignis auftritt, wird die Füllung in die URL des Musters geändert und das Bild angezeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit D3.js Bilder in Kreise einbetten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!