如何用图像填充 D3.js 圆圈？

如何在 D3 JavaScript 中将图像嵌入圆形对象内？

在 D3 JavaScript 中，在现有圆形对象内添加图像需要比简单地使用“填充”或“颜色”属性更细致的方法。应用图像时，“append('image')”方法无法按预期工作。

解决方案：利用模式

要解决此问题，Lars指出需要建立模式。以下链接在 d3 Google 群组论坛上提供了有关此问题的深入讨论：[D3 Google 群组讨论](https://groups.google.com/g/d3-js/c/TPkAqJjjlks)。

实现

以下代码片段在 SVG 中设置模式元素：

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

这样，鼠标悬停时，圆圈就会被图像填充。

以上是如何用图像填充 D3.js 圆圈？的详细内容。更多信息请关注PHP中文网其他相关文章！