D3 Diagramm: Wie kann ich Bilder innerhalb eines Knotens zuweisen

Question

Sie können etwas wie unten in der jsFiddle Demo in dieser Frage enthalten finden, und ich frage mich, wie kann ich Bilder in jedem Knoten zuweisen.

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

Ich habe jsFiddle Demo in diesem Link: http://jsfiddle.net/JSDavi/qvco2Ljy/

Update 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); 

Die obigen Codes ist, wie ich den Kreis und Bilder gesetzt

aber sie bleiben nie zusammen.

das ist meine aktualisierte Demo: http://jsfiddle.net/qvco2Ljy/116/

Answer 1

Für jedes Objekt die URL des Bildes gesetzt:

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

dann statt Kreise anhängt, hängen Sie ein image

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

Dabei sind width und height die entsprechende Bildbreite und -höhe.

PS: Denken Sie daran, dass ich einfach Ihre Frage beantworte ("Wie kann ich Bilder in jeden Knoten zuweisen?"). Wenn das Aufgeben der Kreise für Sie keine Option ist, müssen Sie eine pattern verwenden.