[unlisted] Labeled Force Layout with D3 4.0

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

<!DOCTYPE html>
<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 = 500

var 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