如何在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>

但无济于事..

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