Wie füge ich mithilfe von Mustern Bilder zu Kreisen in D3.js hinzu?

Mit Bildern verbesserte Kreise in D3: Eine umfassende Anleitung

Das Hinzufügen von Bildern zu Kreisen in D3 kann durch den geschickten Einsatz von Mustern erreicht werden. Dieser Ansatz ermöglicht eine interaktive Visualisierung, sodass Bilder bei Mouseover-Ereignissen angezeigt werden können.

Einrichten des Musters:

Um ein Muster zu erstellen, verwenden Sie ein SVG Element. Definieren Sie darin ein mit den gewünschten Abmessungen und weisen Sie ihm eine ID zu. Betten Sie das Bild mit der Funktion ein. Element unter Angabe seiner Position und Größe.

D3-Implementierung:

Um das Muster auf einen Kreis anzuwenden, setzen Sie einfach das Füllattribut des Kreises mithilfe der URL auf die ID des Musters ()-Syntax. Dadurch wird die Farbe des vorhandenen Kreises durch das ausgewählte Bild ersetzt.

Beispielcode:

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

In diesem Code hat der Kreis zunächst eine transparente Füllung . Beim Mouseover wird die Füllung in das Muster mit der Bild-ID geändert, wodurch das Bild innerhalb des Kreises erscheint.

Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe von Mustern Bilder zu Kreisen in D3.js hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!