如何在d3.js中制作一个圆形图片

Question

我使用以下代码来添加图片：

       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>

但是没有任何效果。

- Lyner Kharl

Answer 1

你需要使用图案。

1. 创建包含想要在<defs>标签中使用的图像的图案。
2. 使用一个圆形。
3. 将圆形填充设置为你创建的图案之一。

例如：

var defs = svg.append("defs").attr("id", "imgdefs")

var catpattern = defs.append("pattern")
                        .attr("id", "catpattern")
                        .attr("height", 1)
                        .attr("width", 1)
                        .attr("x", "0")
                        .attr("y", "0")

添加图片：

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 的示例：http://jsfiddle.net/wcnxywuy/1/

- minikomi

---

您还可以使用clipPath来实现反向操作，即将图像裁剪为圆形，而不是在圆形中填充图像。示例 - jshanley

这很好，但问题是我有一组动态图片。 - Lyner Kharl

你能举一个你所遇到的问题的例子吗？ - minikomi

这不是一个完美的解决方案。您必须根据图片的大小指定圆的半径。例如，如果您将圆的半径更改为30，则只能看到猫眼的一小部分。 - derek

@LynerKharl，你可以分享一下你是如何解决这个问题的吗？我也有动态图片。 - lsu_guy