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

Posted 2023-02-22

【中文标题】在 d3 javascript 中的圆形对象内添加图像？

【英文标题】：Adding an image within a circle object in d3 javascript?

【发布时间】：2013-10-12 16:55:03

【问题描述】：

我的目标是使用 d3 将图像添加到现有圆圈中。圆圈将呈现并与 mouseover 方法交互，但仅当我使用 "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 中。让我的标志在圈子内显示有什么帮助吗？谢谢。

【问题讨论】：

尝试将图像设置为pattern。

【参考方案1】：

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

设置模式：

    <svg id="mySvg"  >
      <defs id="mdef">
        <pattern id="image" x="0" y="0"  >
          <image x="0" y="0"   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）。

我看到了你的小提琴。但问题是我如何加载每个圆圈和特定图像？ @user1614080

这里如何去掉鼠标悬停功能

【参考方案2】：

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

【讨论】：

我试图实现这种喜忧参半的成功。 img 已加载到 DOM 中，但我无法让它在圆圈内呈现。这很常见，还是您知道解决此问题的方法？我采用了上面稍微复杂一些的方法并估计了一个模式。

@DeBraid 我可以知道您使用的是哪个 d3 图表吗？如果是渲染问题，请检查火狐浏览器。 \