anson920520 anson920520 - 12 days ago 7
CSS Question

D3 Diagram : how may i assign images inside a node

you can find something like below in the jsFiddle demo included in this question, and i am wondering how may I assign images into each node.

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


I have jsFiddle Demo in this link : http://jsfiddle.net/JSDavi/qvco2Ljy/

Answer

For each object, set the URL of the image:

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

Then, instead of appending circles, append an image

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

Where width and height are the corresponding image width and height.

PS: have in mind that I'm simply answering your question ("how may I assign images into each node?"). If giving up the circles is not an option for you, you'll have to use a pattern.