title: D3.js update leaves duplicate svg elements
body: <p>I am using the D3.js force layout to create a graph.
  To update nodes and edges I follow the example code at 
  <a href="http://bl.ocks.org/mbostock/1095795" rel="nofollow">http://bl.ocks.org/mbostock/1095795</a>.
  This means I have this code to initialize the layout:</p>
  
  <pre><code>var nodes   = [];
  var edges   = [];
  var force = d3.layout
                   .force()
                   .nodes(nodes)
                   .links(edges)
                   ... 
  var link = svg.selectAll('.link');
  var node = svg.selectAll('.node');
  </code></pre>
  
  <p>And I update the data in a function:</p>
  
  <pre><code>//(nodes and edges array has been updated before)
  link = link.data(force.links());
  link.enter()
      .append('g')
      .attr('class', 'link');
  link.append('line')
      .style('stroke-width', function (d) {
          return d.bond*2 + 'px';
      });
  link.exit().remove();
  
  node = node.data(force.nodes());
  node.enter()
      .append('g')
      .attr('class', 'node')
      .call(force.drag);
  
  node.append('circle')
      .attr('r', function (d) { return radius(d.size) })
      .style('fill', function (d) { return color(d.type) });
  node.exit().remove();
  
  force.start();
  </code></pre>
  
  <p>I inspected the content of the nodes and edges arrays and the force.nodes() and force.links() and it seems like everything is correct,
  but the graph shows edges of previous data. 
  So I also looked at the svg and it seems like the group (<code>&lt;g&gt;</code>) of nodes and edges contains more than one 'line' and 'circle' element respectively:</p>
  
  <pre><code>&lt;g class="link"&gt;
      &lt;line x1="39.28621930166058" y1="256.22690655336356"
      x2="217.9040028325144" y2="12.304247302113906" 
      style="stroke-width: 2px;"&gt;&lt;/line&gt;
  
      &lt;line x1="199.64928632623412" y1="275.35140495955585"
      x2="275.5229250036658" y2="100.33170397523202"
      style="stroke-width: 2px;"&gt;&lt;/line&gt;
  &lt;/g&gt; 
  </code></pre>
  
  <p>The same applies to the nodes.</p>
  
  <p>How can I remove the previous elements from the group when updating?
  I can't seem to find the answer in the linked example or in the d3 docs.</p>