Transitions from one element to another
Yes, if you chain with each then its has to be a recursive structure like that.

I like the mediator pattern for this...



var mediator = d3.dispatch('phase1', 'phase2'),

 bubbles = d3.selectAll(".bubbles")
   .style("opacity", 0.5);

   
 mediator.on('phase1', function(then) {
      
  d3.select(".bubble1")
  .transition().duration(2000)
    .style("opacity", 1)
    .transition().duration(2000)
   .style("opacity", 0)
  .each('end.phase1', function () { mediator[then]() })
        
 });

 mediator.on('phase2', function() {
      
  d3.select(".bubble2")
  .transition().duration(2000)
    .style("opacity", 1)
    .transition().duration(2000)
   .style("opacity", 0);
      
 });

 mediator.phase1('phase2');
&lt;div class="bubbles bubble1"&gt;bubble1&lt;/div&gt;
    &lt;div class="bubbles bubble2"&gt;bubble2&lt;/div&gt;

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;




It's much easier to automate