Transitions from one element to another I am implementing an automated help function in my code. It is simply a few bubbles that pop up with some text in them. I use d3 to select one bubble, display it for a short time, and then select another bubble and display that one. It works, but I don't like the shape the code is taking. Am I approaching this correctly?

d3.select("#targetYear-bubble")
    .transition().duration(2000)
    .style("opacity", 1)
    .transition().duration(2000)
        .style("opacity", 0)
        .each("end", function()
        {
            d3.select("#navTree-bubble").transition().duration(2000)
                .style("opacity", 1)
                .transition().duration(2000)
                .style("opacity", 0);
        })
        ;


This code displays 2 pop-up bubbles. It's manageable for now, but if I had a complex screen with 7 or 8 (or more) bubbles, this code would be much too complex.

Can someone make a suggestion for a better implementation of this?
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