title: D3 - adding text labels to updating force layout diagram
body: <p>I've been working on extending one of Mike Bostock's D3 examples I've seen online with a bit of success.</p>
  
  <p><a href="https://bl.ocks.org/mbostock/1095795" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/1095795</a></p>
  
  <p>I've managed to get this to fit my needs to I can append additional nodes and links.  I'm attempting to add labels to each of the nodes, and I think I'm missing something fundamental.</p>
  
  <p>I've added a new group for text labels and included this in the restart function from the example and the tick function for the simulation.  What appears in the DOM seems correct from my perspective, but the labels just appear in the middle of the diagram.</p>
  
  <p>Here's a Fiddle of what I've got, any help would be much appreciated.  I've not really got a lot of experience with D3/SVG in general, so I think I must be missing something pretty fundamental.</p>
  
  <p>Specifically what I've added is:</p>
  
  <p>Add an additional group for text</p>
  
  <pre><code>var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
  link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"),
  node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node"),
  text = g.append("g").selectAll("text"); 
  </code></pre>
  
  <p>Update the text group based on node id</p>
  
  <pre><code>  // Apply the general update pattern to the text.
    text = text.data(nodes, function(d) { return d.id; });
    text.exit().remove();
    text = text.enter().append("text").text(function (d) {return d.id;}).merge(text);
  </code></pre>
  
  <p>Update in the tick function to match the node</p>
  
  <pre><code>  text.attr("cx", function(d) { return d.x;})
    .attr("cy", function(d) { return d.y;});
  </code></pre>
  
  <p><a href="https://jsfiddle.net/3b68rm94/1/" rel="nofollow noreferrer">https://jsfiddle.net/3b68rm94/1/</a></p>
  
  <p>Many thanks.</p>