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.
license: mit |
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.
<!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> |