Ajout d'une image à l'intérieur d'un cercle objet en d3 javascript?
Mon but est d'ajouter une image dans un cercle avec d3. Le cercle se rendre et est interactif avec la méthode mouseover, mais seulement lorsque j'utilise "remplir", "couleur", et non pas quelque chose de plus sophistiqué, comme .append("image").
g.append("circle")
.attr("class", "logo")
.attr("cx", 700)
.attr("cy", 300)
.attr("r", 10)
.attr("fill", "black") //this code works OK
.attr("stroke", "white") //displays small black dot
.attr("stroke-width", 0.25)
.on("mouseover", function(){ //when I use .style("fill", "red") here, it works
d3.select(this)
.append("svg:image")
.attr("xlink:href", "/assets/images/logo.jpeg")
.attr("cx", 700)
.attr("cy", 300)
.attr("height", 10)
.attr("width", 10);
});
L'image ne montre pas après je souris au-dessus. À l'aide de Ruby on Rails app, où mon image "logo.jpeg" est stocké dans les assets/images/répertoire. Toute l'aide pour l'obtention de mon logo à afficher à l'intérieur du cercle? Merci.
- Essayez de définir l'image en tant que pattern.
Vous devez vous connecter pour publier un commentaire.
Que Lars est dit que vous devez utiliser de modèle, une fois que vous faites cela, il devient assez simple. Voici un lien vers un conversation en d3 groupes de google à ce sujet. J'ai mis en place un violon ici à l'aide de l'image d'une pinte de bière de cette conversation et de votre code ci-dessus.
Pour configurer le modèle:
Puis la d3 où nous n'modifier le remplissage: