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>

但无济于事。

Answer 1

您需要使用模式。

创建包含要在<defs>标记中使用的图像的模式。
使用圆圈
将圆形填充设置为您创建的其中一种模式。

例如：

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

如何在d3.js中制作图像

1 个答案: