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