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

IT技术 javascript css ruby-on-rails d3.js
2021-02-10 19:54:06

我的目标是使用 d3 将图像添加到现有圆圈中。圆圈将呈现并与鼠标悬停方法交互，但仅当我使用"fill", 时"color"，而不是像.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/ directory. 让我的徽标显示在圆圈内有什么帮助吗？谢谢。

2个回答

正如 Lars 所说，你需要使用模式，一旦你这样做了，它就会变得非常简单。这是d3 google 群组中有关此问题的对话的链接。我已经使用该对话中的品脱图像和上面的代码在此处设置了一个小提琴。

要设置模式：

    <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");
         });
厉害了，谢谢 以上工作完美，虽然我不熟悉 defs 或模式，所以这是新的学习。要使图像居中，请确保宽度和高度与圆形 DIAMETER 的像素数相同（在这种情况下，r= 10, h, w = 20）。
2021-03-23 19:54:06
如何在此处删除鼠标悬停功能
2021-03-23 19:54:06
我看到了你的小提琴。但问题是如何加载每个圆圈和特定图像？@用户1614080
2021-04-06 19:54:06 
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;}
            });
@DeBraid 我可以知道您使用的是哪个 d3 图吗？如果是渲染问题，请用firefox浏览器检查。\
2021-03-21 19:54:06
我试图实现这种喜忧参半的成功。img 已加载到 DOM 中，但我无法让它在圆圈内呈现。这是常见的，还是您知道解决此问题的方法？我采用了上面稍微复杂的方法并估计了一个模式。
2021-04-06 19:54:06
其它你可能感兴趣的问题
上一篇如何在轴three.js上旋转3D对象？ 下一篇为什么 JavaScript map 函数返回 undefined？