Wie fülle ich einen D3.js-Kreis mit einem Bild?

Wie bette ich ein Bild in ein Kreisobjekt in D3-JavaScript ein?

In D3-JavaScript erfordert das Hinzufügen eines Bildes in ein vorhandenes Kreisobjekt ein differenzierterer Ansatz als die einfache Verwendung der Attribute „Füllung“ oder „Farbe“. Beim Anwenden eines Bildes funktioniert die Methode „append('image')“ nicht wie erwartet.

Lösung: Muster verwenden

Um dieses Problem zu beheben, Lars wies auf die Notwendigkeit hin, ein Muster zu etablieren. Der folgende Link bietet eine aufschlussreiche Diskussion zu diesem Thema im d3 Google Groups-Forum: [D3 Google Groups-Diskussion](https://groups.google.com/g/d3-js/c/TPkAqJjjlks).

Implementierung

Der folgende Codeausschnitt richtet das Muster im SVG ein Element:

<svg></svg>

Im D3-Skript wird das Attribut „fill“ wie folgt angepasst:

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

Auf diese Weise wird der Kreis beim Mouseover mit dem Bild gefüllt.

Das obige ist der detaillierte Inhalt vonWie fülle ich einen D3.js-Kreis mit einem Bild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!