Comment puis-je intégrer des images dans des cercles à l'aide de D3.js ?

Affichage d'images dans des objets circulaires à l'aide de d3.js

L'ajout d'images dans un objet circulaire à l'aide de d3.js peut être réalisé grâce à l'utilisation de motifs. Comme indiqué dans la requête initiale, le rendu simple des cercles à l'aide d'attributs tels que « fill » et « color » est simple. Cependant, l'incorporation d'éléments plus complexes comme des images nécessite une approche différente.

Pour afficher une image dans un cercle, la balise de motif est utilisée. Cette balise permet de définir un élément graphique répété pouvant être appliqué sous forme de remplissage ou de contour. Dans la balise de motif, un élément d'image est défini qui spécifie l'image à afficher et son positionnement.

Vous trouverez ci-dessous un exemple démontrant l'utilisation de modèles pour ajouter une image à un cercle :

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

Dans ce code, le modèle défini dans le document HTML est référencé par son identifiant dans l'attribut "fill" de l'élément circle. Lorsque l'événement de survol de la souris se produit, le remplissage est remplacé par l'URL du motif, affichant l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!