Built with blockbuilder.org
xxxxxxxxxx
<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>
https://d3js.org/d3.v4.js