Javascript 如何在d3.js中使图像圆化

要附加图像，我使用以下代码

       node.append("image")
            .attr("xlink:href", function(d) { return d.img; })
            .attr("x", -25)
            .attr("y", -25)
            .attr("width", 50)
            .attr("height", 50)

   .attr("style", "border-radius: 30px;");

我希望图像是圆形的，我已经尝试使用此代码

       node.append("image")
            .attr("xlink:href", function(d) { return d.img; })
            .attr("x", -25)
            .attr("y", -25)
            .attr("width", 50)
            .attr("height", 50)

   .attr("style", "border-radius: 30px;");

但是它不起作用。。我也试过这个

<style>
   .node image{
      border-color: 2px solid orange;
       border-radius: 25px;
    }

</style>

.节点映像{
边框颜色：2倍纯色橙色；
边界半径：25px；
}

但是没有用。

---

.

您需要使用模式

创建包含要在

标记中使用的图像的图案

用圆圈

将“圆形填充”设置为创建的图案之一

例如：

添加图像：

catpattern.append("image")
     .attr("x", -130)
     .attr("y", -220)
     .attr("height", 640)
     .attr("width", 480)
     .attr("xlink:href", imgurl)

然后设置填充：

svg.append("circle")
    .attr("r", 100)
    .attr("cy", 80)
    .attr("cx", 120)
    .attr("fill", "url(#catpattern)")

---

JS Fiddle示例：

您也可以使用剪贴画来做相反的操作，将图像裁剪成圆形，而不是用图像填充圆形。这很好，但问题是我有一组动态图像。你能举例说明你有什么问题吗？这不是一个完美的解决方案。您必须根据图片的大小指定圆的半径。例如，如果将圆的半径更改为30，则只能看到猫眼的一小部分。@LynerKharl您能分享一下您是如何解决这个问题的吗？我也有动态图像。