d3.js - Forced directed D3 Graph setting specific image for each node -

hi have gone through few questions , possible solutions of putting image node in forced directed. of them either putting randomly or 1 image all. there way can assign particular image particular node? creating dynamically , fetching data database. highly appreciated.

try shown in fiddle: http://jsfiddle.net/cyril123/n28k7oqo/3/

you can specify data , pass image shown below

var graph = {   "nodes": [     {"x": 469, "y": 410, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/mine-512.png"},     {"x": 493, "y": 364, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-09-128.png"},     {"x": 442, "y": 365, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-17-128.png"},     {"x": 467, "y": 314, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-22-128.png"},     {"x": 477, "y": 248, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-13-128.png"},     {"x": 425, "y": 207, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/mine-512.png"},     {"x": 402, "y": 155, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-03-128.png"},     {"x": 369, "y": 196, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/mine-512.png"},     {"x": 350, "y": 148, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/mine-512.png"},     {"x": 539, "y": 222, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/mine-512.png"},     {"x": 594, "y": 235, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-23-128.png"},     {"x": 582, "y": 185, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/mine-512.png"},     {"x": 633, "y": 200, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/mine-512.png"}   ],   "links": [     {"source":  0, "target":  1},     {"source":  1, "target":  2},     {"source":  2, "target":  0},     {"source":  1, "target":  3},     {"source":  3, "target":  2},     {"source":  3, "target":  4},     {"source":  4, "target":  5},     {"source":  5, "target":  6},     {"source":  5, "target":  7},     {"source":  6, "target":  7},     {"source":  6, "target":  8},     {"source":  7, "target":  8},     {"source":  9, "target":  4},     {"source":  9, "target": 11},     {"source":  9, "target": 10},     {"source": 10, "target": 11},     {"source": 11, "target": 12},     {"source": 12, "target": 10}   ] } 

edit * explanation * x , y in json probable place want place circle. imagine don't have x , y of nodes ...in such case dont pass x , y in json. thing this:

 ..."nodes": [ {   'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/mine-512.png" }, .... 

regarding img pass url of image wish see on node. have done above.

this append image node group:

  //make groups hold teh image , circle   nodes = node.data(graph.nodes)     .enter().append("g");    //make node circle in group                      var circles = nodes.append("circle")       .attr("class", "node")       .attr("r", 12)       .on("dblclick", dblclick)       .call(drag);   //make images in group var images = nodes.append("svg:image")     .attr("xlink:href",function(d) {return d.img})     .attr("height", "20")     .attr("width", "20"); 

the node group group contains circle , image hope clears of doubts...:)