title: d3: How to properly chain transitions on different selections
body: <p>I am using V3 of the popular d3 library and basically want to have three transitions, followed by each other: The first transition should apply to the exit selection, the second to the update selection and the third to the enter selection. They should be chained in such a manner that when one of the selections is empty, its respective transition is skipped. I.e. when there is no exit selection, the update selection should start immediately. So far, I have come up with this code (using the <code>delay</code> function). </p>
  
  <pre><code>// DATA JOIN
  var items = d3.select('#data').selectAll('.item');
  items = items.data(data, function(d){ 
      return d.twitter_screenname;
  });
  
  
  // EXIT
  items.exit().transition().duration(TRANSITION_DURATION).style('opacity', 0).remove();
  
  // UPDATE
  // Divs bewegen
  items.transition().duration(TRANSITION_DURATION).delay(TRANSITION_DURATION * 1)
      .style('left', function(d, i) {
          return positions[i].left + "px";
      }).style('top', function(d, i) {
          return positions[i].top + "px";
      });
  
  // ENTER
  // Divs hinzufügen
  var div = items.enter().append('div')
      .attr('class', 'item')
      .style('left', function(d, i) {
          return positions[i].left + "px";
      }).style('top', function(d, i) {
          return positions[i].top + "px";
      });
  
   div.style('opacity', 0)
      .transition().duration(TRANSITION_DURATION).delay(TRANSITION_DURATION * 2)
      .style('opacity', 1);
  </code></pre>
  
  <p>First of all it doesn't allow to "skip" transitions and secondly I think there is a better way than <code>delay</code>. I've looked at <a href="http://bl.ocks.org/mbostock/3903818" rel="noreferrer">http://bl.ocks.org/mbostock/3903818</a> but I did not really understand what is happening.</p>
  
  <p>Also, somehow just writing <code>items.exit().transition().duration(TRANSITION_DURATION).remove()</code> does not work with the <code>items</code>, probably because they are not SVG elements but <code>div</code>s. </p>