在d3 javascript中的圆对象中添加图像？ [英] Adding an image within a circle object in d3 javascript?

问题描述

我的目标是使用d3将图片添加到现有的圈子中。圆形将渲染并与鼠标悬停方法交互，但只有当我使用填充，颜色，而不是像.append（image）更复杂的。

My goal is to add an image into an existing circle with d3. The circle will render and is interactive with mouseover method, but only when I use "fill", "color", and not something more sophisticated like .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 /目录中。任何帮助，让我的标志显示在圈子内？谢谢。

The image doesn't show after I mouse over. Using Ruby on Rails app, where my image "logo.jpeg" is stored in the assets/images/ directory. Any help for getting my logo to show within the circle? Thanks.

推荐答案

由于Lars说你需要使用模式，一旦你这样做，它变得非常简单。这是指向d3 google网上论坛中的对话的链接。我在这里使用该会话中的品脱图片和您上面的代码设置了小提琴。

As Lars says you need to use pattern, once you do that it becomes pretty straightforward. Here's a link to a conversation in d3 google groups about this. I've set up a fiddle here using the image of a pint from that conversation and your code above.

要设置模式：

    <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>

然后d3，我们只更改填充：

Then the d3 where we only change the fill:

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

这篇关于在d3 javascript中的圆对象中添加图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！