Comment ajouter des images aux cercles dans D3.js à l'aide de modèles ?

Cercles améliorés avec des images dans D3 : un guide complet

L'ajout d'images aux cercles dans D3 peut être réalisé grâce à l'utilisation intelligente de motifs. Cette approche permet une visualisation interactive, permettant aux images d'apparaître lors des événements de survol de la souris.

Configuration du modèle :

Pour créer un modèle, utilisez un fichier SVG élément. Dans ce cadre, définissez un avec les dimensions souhaitées et attribuez-lui un identifiant. Incorporez l'image à l'aide de l'option élément, en précisant son emplacement et sa taille.

Implémentation D3 :

Pour appliquer le motif à un cercle, définissez simplement l'attribut de remplissage du cercle sur l'ID du motif à l'aide de l'url () syntaxe. Cela remplacera la couleur du cercle existant par l'image choisie.

Exemple de code :

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

Dans ce code, le cercle a initialement un remplissage transparent . Au survol de la souris, le remplissage est remplacé par le motif avec l'ID de l'image, ce qui fait apparaître l'image dans le cercle.

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!