anson920520 anson920520 - 1 month ago 11
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 = {

I have jsFiddle Demo in this link :


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

     .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.