Chained transition with different elements by ee2dev

Built with blockbuilder.org

Slight adjustment from Chained transition with different elements to repeatedly call the chained transaction with just one element not the whole selection.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <script src="https://d3js.org/d3.v4.js"></script>
</head>

<body>
    <script>
        let sel = d3.select("body");
        let selFirst = sel.append("h1").attr("class", "chained-transition first").text("first");
        let selSecond = sel.append("h1").attr("class", "chained-transition second").text("second");
        let selThird = sel.append("h1").attr("class", "chained-transition third").text("third");

        let chainedSel = d3.selectAll(".chained-transition").data([1000,2000,3000]);

        chainedTransition(chainedSel);
				
      	function chainedTransition(_chainedSel, _index = 0) {
          let nextSel = _chainedSel.filter(function(d,i) { return _index === i;});
          transitionNext(nextSel);
          
          function transitionNext(_selection){
                  _selection.transition()
                          .duration(d => d)
                          .style("opacity", 0)
                      .transition()
                          .duration(d => d)
                          .style("opacity",1)
                          .style("color", "green")
                      .on ("end", function() {
                          _index = _index + 1;
                          if (_chainedSel.size() > _index) { 
                            nextSel = _chainedSel.filter(function(d,i) { return _index === i;});
                            transitionNext(nextSel);
                          }
                      });
          }
        }
    </script>
</body>
</html>