在 d3 javascript 中的圆形对象内添加图像?

2022-01-31 00:00:00 d3.js ruby-on-rails javascript css

我的目标是使用 d3 将图像添加到现有圆圈中.圆圈将呈现并与 mouseover 方法交互，但仅当我使用 fill"、color" 而不是像 这样更复杂的东西时.附加(图像").

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 群组中对话的链接对这个.我在这里使用来自该对话的品脱图像和您上面的代码设置了 fiddle.

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

然后是我们只改变填充的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");
         });

相关文章