在D3JS上的圆形图片

Question

我想在图中用D3JS创建一个圆形的图片。 这里是我的小提琴：http://jsfiddle.net/vsvuyusg/1/

正如你可以看到，在99行，我们有这样的代码（即要工作）：

var defs = svg.append('svg:defs'); 

node.each(function(d) { 
    var _node = d3.select(this); 

    defs.append("svg:pattern") 
     .attr("id", "circlePicture_" + d.name) 
     .append("svg:image") 
     .attr("xlink:href", function(d) { 
      var rnd = Math.floor(Math.random() * 64 + 1); 
      var imagePath = 
       "http://www.bigbiz.com/bigbiz/icons/ultimate/Comic/Comic" 
       + rnd.toString() + ".gif"; 
      console.log(imagePath); 
      return imagePath; 
     }) 
     .attr("width", 12) 
     .attr("height", 12) 
     .attr("x", 0) 
     .attr("y", 0); 

    _node.append("circle") 
     .attr("cx", 12) 
      .attr("cy", 12) 
     .attr("r", 12) 
     .style("fill", "url(#circlePicture_" + d.name + ")") 
}); 

我为每一个图像的模式，在设置节点名称并用它来填充附加到该节点的圆圈（使用与ref相同的节点名称）。

我注意到代码执行后，我在svg标记内找不到任何def或pattern标记。尽管我们在创建模式时所使用的console.log完全可以执行。

怎么了？

Answer 1

您需要设置一个高度/宽度属性pattern节点上：

defs.append("svg:pattern") 
    .attr("id", "circlePicture_" + d.name) 
    .attr("width", 12) 
    .attr("height", 12) 
    .append("svg:image") 
    ... 

更新fiddle。