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.
InformationsquelleAutor DeBraid | 2013-10-05