title: How to update elements of D3 force layout when the underlying data changes
body: <p>I'm using one of the force layout examples (<a href="http://bl.ocks.org/1153292" rel="noreferrer">http://bl.ocks.org/1153292</a>) to show a network on my web site.</p>
  
  <p>I allow the user to choose which type of links to see at any given time. I notice that when I choose to see link type A, then add link type B and then remove link type A the remain links of type B are presented with A colors.</p>
  
  <p>This is the code that runs to add the links to the svg diagram. I am changing the array <code>this.links</code> by adding and removing links from it. As you can see I set the class attribute but it is not updating - it remains of type of link A.</p>
  
  <pre><code>var path = svg.append("svg:g")
      .selectAll("path")
      .data(this.links)
     .enter()
      .append("svg:path")
      .attr("class", function(d) { return "link " + d.type; })
      .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
  </code></pre>
  
  <p>I currently work around this problem by updating the class attribute inside the tick function but this off course cause much un-needed work.</p>
  
  <p>I read that the enter operation return a merged selection of the exist elements and also the new ones so the attr operation should update the exist one and set the new one.</p>
  
  <p>What am I missing?</p>