D3圖：如何在節點內分配圖像

Question

您可以在此問題中包含的jsFiddle演示中找到如下所示的內容，並且我在想如何將圖像分配到每個節點。

var graph = { 
    "nodes":[ 
     {"name":"1","rating":90,"id":2951}, 
    ] 
} 

我的jsfiddle演示在這個鏈接：http://jsfiddle.net/JSDavi/qvco2Ljy/

更新1：以上

node.append("circle") 
     .attr("r", function(d) { return d.weight * 2+ 12; }) 
     .style("fill", function(d) { return color(1/d.rating); }); 

node.append("image") 
     .attr("xlink:href", d=> d.url) 

     //people icon's location (x,y) 

     .attr("x", function(d) { return d.weight * 2+ 12; }) 
     .attr("y", function(d) { return d.height * 2+ 12; }) 

     //people icon's size 
     .attr("width", width/10) 
     .attr("height", height/10); 

的代碼是如何設置的圓和圖像

但他們從不粘在一起。

這是我更新的演示：http://jsfiddle.net/qvco2Ljy/116/

Answer 1

對於每一個對象，設置圖像的URL：

{name: "1", rating: 90, id: 2951, url: "someUrl"}, 

然後，而不是附加圈，追加一個image

node.append("image") 
    .attr("xlink:href", d=> d.url) 
    .attr("x", -width/2) 
    .attr("y", -height/2) 
    .attr("width", width) 
    .attr("height", height); 

其中width和height是相應的圖像寬度和高度。

PS：記住，我只是回答你的問題（「我怎麼可以分配圖像到每個節點？」）。如果放棄圈子不是您的選擇，您將不得不使用pattern。