Making D3 like Force-Directed Graph with PNGs

Question

I\'ve been trying to make D3 like Force-Directed Graph (example: https://bl.ocks.org/mbostock/4062045) with PNGs (meaning the dots should be pictures).

Here is a vis

Answer 1

Since you didn't post your code to create the force, I'll provide a general answer. You may have to adapt it according to your specific code.

The basic idea here is appending group elements for each node, and appending both the circles and the images to those groups. Here I'm using 40x40 PNGs:

var node = svg.selectAll("foo")
     .data(nodes)
     .enter()
     .append("g")
     .call(d3.drag()
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended));

 var nodeCircle = node.append("circle")
     .attr("r", 20)
     .attr("stroke", "gray")
     .attr("fill", "none");

 var nodeImage = node.append("image")
     .attr("xlink:href", d => d.image)
     .attr("height", "40")
     .attr("width", "40")
     .attr("x", -20)
     .attr("y", -20);

The url of each image is in the data array of the nodes:

 var nodes = [{
     "id": "foo",
     "image": "https://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png"
 }, {
     "id": "bar",
     "image": "https://icons.iconarchive.com/icons/carlosjj/mozilla/48/Firefox-icon.png"
 }, {
     "id": "baz",
     "image": "https://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/48/safari-icon.png"
 }, {
     "id": "barbaz",
     "image": "https://icons.iconarchive.com/icons/ampeross/smooth/48/Opera-icon.png"
 }];

Here is a demo:

var width = 300;
 var height = 200;

 var svg = d3.select("body")
     .append("svg")
     .attr("width", width)
     .attr("height", height);

 var nodes = [{
     "id": "Chrome",
     "image": "https://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png"
 }, {
     "id": "Firefox",
     "image": "https://icons.iconarchive.com/icons/carlosjj/mozilla/48/Firefox-icon.png"
 }, {
     "id": "Safari",
     "image": "https://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/48/safari-icon.png"
 }, {
     "id": "Opera",
     "image": "https://icons.iconarchive.com/icons/ampeross/smooth/48/Opera-icon.png"
 }];

 var edges = [{
     "source": 0,
     "target": 1
 }, {
     "source": 0,
     "target": 2
 }, {
     "source": 0,
     "target": 3
 }];

 var simulation = d3.forceSimulation()
     .force("link", d3.forceLink())
     .force("charge", d3.forceManyBody().strength(-1000))
     .force("center", d3.forceCenter(width / 2, height / 2));

 var links = svg.selectAll("foo")
     .data(edges)
     .enter()
     .append("line")
     .style("stroke", "#ccc")
     .style("stroke-width", 1);

 var color = d3.scaleOrdinal(d3.schemeCategory20);

 var node = svg.selectAll("foo")
     .data(nodes)
     .enter()
     .append("g")
     .call(d3.drag()
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended));

 var nodeCircle = node.append("circle")
     .attr("r", 20)
     .attr("stroke", "gray")
     .attr("stroke-width", "2px")
     .attr("fill", "white");

 var nodeImage = node.append("image")
     .attr("xlink:href", d => d.image)
     .attr("height", "40")
     .attr("width", "40")
     .attr("x", -20)
     .attr("y", -20)

 var texts = node.append("text")
     .style("fill", "black")
     .attr("dx", 20)
     .attr("dy", 8)
     .text(function(d) {
         return d.id;
     });

 simulation.nodes(nodes);
 simulation.force("link")
     .links(edges);

simulation.on("tick", function() { 
     links.attr("x1", function(d) {
             return d.source.x;
         })
         .attr("y1", function(d) {
             return d.source.y;
         })
         .attr("x2", function(d) {
             return d.target.x;
         })
         .attr("y2", function(d) {
             return d.target.y;
         })

     node.attr("transform", (d) => "translate(" + d.x + "," + d.y + ")")


 });

 function dragstarted(d) {
     if (!d3.event.active) simulation.alphaTarget(0.3).restart();
     d.fx = d.x;
     d.fy = d.y;
 }

 function dragged(d) {
     d.fx = d3.event.x;
     d.fy = d3.event.y;
 }

 function dragended(d) {
     if (!d3.event.active) simulation.alphaTarget(0);
     d.fx = null;
     d.fy = null;
 }

<script src="https://d3js.org/d3.v4.min.js"></script>