javascript - 在 d3 javascript 中的圆形对象中添加图像？

Question

我的目标是使用 d3 将图像添加到现有的圈子中。圆圈将呈现并与鼠标悬停方法交互，但仅当我使用 "fill"、"color" 时，而不是像 .append( “图片”)。

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/目录中。让我的 Logo 显示在圆圈内有什么帮助吗？谢谢。

Answer 1

正如 Lars 所说，您需要使用模式，一旦您这样做，它就会变得非常简单。这是 conversation 的链接在 d3 谷歌群组中关于这个。我设置了一个 fiddle此处使用该对话中的一品脱图像和上面的代码。

设置模式:

    <svg id="mySvg" width="80" height="80">
      <defs id="mdef">
        <pattern id="image" x="0" y="0" height="40" width="40">
          <image x="0" y="0" width="40" height="40" xlink:href="http://www.e-pint.com/epint.jpg"></image>
        </pattern>
      </defs>
    </svg>

然后我们只改变填充的d3:

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