Comment remplir un cercle D3.js avec une image ?

Comment intégrer une image dans un objet cercle dans JavaScript D3 ?

Dans JavaScript D3, l'ajout d'une image à l'intérieur d'un objet cercle existant nécessite une approche plus nuancée que la simple utilisation des attributs « fill » ou « color ». Lors de l'application d'une image, la méthode "append('image')" ne fonctionne pas comme prévu.

Solution : Utiliser des modèles

Pour résoudre ce problème, Lars a souligné la nécessité d’établir un modèle. Le lien suivant fournit une discussion intéressante à ce sujet sur le forum des groupes Google d3 : [Discussion des groupes Google D3](https://groups.google.com/g/d3-js/c/TPkAqJjjlks).

Implémentation

L'extrait de code suivant configure le modèle dans le SVG element :

<svg>

Dans le script D3, l'attribut "fill" est ajusté comme suit :

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

De cette façon, le cercle est rempli de l'image au survol de la souris.

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!