在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。