{
let sel = d3.select(div);
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) % _chainedSel.size();
nextSel = _chainedSel.filter(function(d,i) { return _index === i;});
transitionNext(nextSel);
});
}
}
}