title: Handling Removal of Elements with Data Join in D3.js
body: <p>I have a set of circles on a graph with the following data and using the date, as each circles key:</p>
  
  <pre><code>data = [
   {date: '2012-01-01', amount: 100 },
   {date: '2012-01-02', amount: 200 },
   {date: '2012-01-03', amount: 300 },
   {date: '2012-01-04', amount: 400 },
   {date: '2012-01-05', amount: 500 }
  ]
  
  var circles = container.selectAll("g.circles")
      .data(data, function(d){ return d.date; });
  
  // ENTER
  circles.enter().append("circle")
    .attr("class","live")
    .attr("cy", function(d){return yScale(y(d,i)); })
    .attr("cx", function(d){return xScale(x(d,i)); })
  .transition(500)
    .delay(function(d,i){return i*50;})
    .style("display",function(d){ return y(d,i) === null ? 'none' : 'inline'; })
    .attr("r", radius - 3 )
    .attr("fill", "#f7f7f7")
    .attr('clip-path','url(#rpm-clip2)')
    .each("end", events);
  
  // TRANSITION
  d3.transition(circles)
    .attr("cy", function(d){return yScale(y(d,i)); })
    .attr("cx", function(d){return xScale(x(d,i)); });
  </code></pre>
  
  <p>I then reload data with the following data set:</p>
  
  <pre><code>data = [
   {date: '2012-01-01', amount: 200 },
   {date: '2012-01-02', amount: 300 },
   {date: '2012-01-03', amount: 400 },
  ]
  </code></pre>
  
  <p>As you'll notice, this data set is shorter. I would like the dates that are missing to be removed but they aren't touched in the update. Any ideas?</p>