在D3 JavaScript中在圆对象内添加图像？

Question

我的目标是使用d3将图像添加到现有圆中。圆圈将呈现并与鼠标悬停方法交互，但仅当我使用“填充”，“颜色”，而不是诸如.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);

         });

鼠标悬停后图像未显示。使用Ruby on Rails应用程序，我的图像“ logo.jpeg”存储在assets / images /目录中。对让我的徽标在圈子中显示有什么帮助吗？谢谢。

Answer 1

nodeEnter.append("svg:image")            .attr('x',-9)            .attr('y',-12)            .attr('width', 20)            .attr('height', 24)            .attr("xlink:href", function(d) {          if(d.type=="root"){            return "resources/images/test.png";}            else if(d.type.toLowerCase()=="A"){                return "resources/icon01/test1.png";}            else if(d.type=="B"){                return "resources/icon01/test2.png";}            })            .append("svg:title")              .text(function(d){              if(d.type=="root"){                return "Root Name:"+d.name;}              else if(d.type=="test"){                return "Name:"+d.name;}            });