A force-directed graph using images as nodes, with accompanying text labels. Upgraded to the D3 4.0 API in response to the post on the D3 mailing list Force Directed Graph Node Labels in V4. Draws from this 4.0 example Force Dragging III. The only thing missing from the original is the dragging.
forked from mbostock's block: Labeled Force Layout
xxxxxxxxxx<meta charset="utf-8"><style>.link { stroke: #ccc;}.node text { pointer-events: none; font: 10px sans-serif;}</style><body><script src="//d3js.org/d3.v4.0.0-alpha.49.min.js"></script><script>var width = 960, height = 500var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height);var simulation = d3.forceSimulation() .force("center", d3.forceCenter(width / 2, height / 2)) .force("charge", d3.forceManyBody()) .force("link", d3.forceLink());d3.json("graph.json", function(error, json) { if (error) throw error; simulation .nodes(json.nodes); simulation .force("link") .links(json.links); var link = svg.selectAll(".link") .data(json.links) .enter().append("line") .attr("class", "link"); var node = svg.selectAll(".node") .data(json.nodes) .enter().append("g") .attr("class", "node"); node.append("image") .attr("xlink:href", "https://github.com/favicon.ico") .attr("x", -8) .attr("y", -8) .attr("width", 16) .attr("height", 16); node.append("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.name }); simulation.on("tick", function() { link.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", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); });});</script> https://d3js.org/d3.v4.0.0-alpha.49.min.js