title: d3 remove data using exit
body: <p>I've prepared a small fiddle to illustrate the problem <a href="http://jsfiddle.net/zhFbn/" rel="noreferrer">here</a></p>
  
  <p>I'm having an issue using d3's exit function to remove elements from the dom. </p>
  
  <p>Say I have an array of 10 elements:</p>
  
  <pre><code>var data = [1 ,4, 5, 6, 24, 8, 12, 1, 1, 20]
  </code></pre>
  
  <p>I use this data to create a simple horizontal bar chart using d3 </p>
  
  <pre><code>d3.selectAll('rect') 
  .data(data) 
  .enter() 
  .attr("class", "rectangle")
  .attr("stroke", "black")
  .attr("stroke-width","1px")
  .attr("fill","none")
  .attr("x", 0)
  .attr("y", function(d, i) { return 25 * i; } )
  .attr("width", function(d) { return 22 * d; } )
  .attr("height", "20");
  </code></pre>
  
  <p>Now after a short delay I'd like to prune my dataset so all that I have left is </p>
  
  <pre><code>var truncatedData = [4,5]
  
  d3.selectAll('rect')
      .data(truncatedData )   
      .exit()
      .transition()
      .delay(3000)
      .remove();
  </code></pre>
  
  <p>Data is removed successfully but it still shows the first two elements 1,4 instead of 4,5. </p>
  
  <p>How can I remove all but [4,5] from the dom?</p>