Chained transition with different elements by EE2dev

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]);

        transitionNext(chainedSel);

        function transitionNext(_selection, _index = 0){
            console.log("index: " + _index);
            let newSel = 
                _selection.filter(function(d,i) { return _index === i;});

                newSel.transition()
                        .duration(d => d)
                        .style("opacity", 0)
                    .transition()
                        .duration(d => d)
                        .style("opacity",1)
                        .style("color", "green")
                    .on ("end", function() {
                        _index = _index + 1;
                        if (_selection.size() > _index) { transitionNext(_selection, _index);}
                    });
        }
    </script>
</body>
</html>