Using explicit delays to chain transitions. Compare to using transition.each. In response to a Stack Overflow question.
Exit, Update, Enter
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
div { | |
background: white; | |
border: solid 1px #ccc; | |
padding: 20px; | |
margin: 20px; | |
} | |
</style> | |
<div>update</div> | |
<div>exit</div> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var duration = 750; | |
var div = d3.select("body").selectAll("div") | |
.data(["enter", "update"], function(d) { return d || this.textContent; }); | |
// 2. update | |
div.transition() | |
.duration(duration) | |
.delay(!div.exit().empty() * duration) | |
.style("background", "orange"); | |
// 3. enter | |
div.enter().append("div") | |
.text(function(d) { return d; }) | |
.style("opacity", 0) | |
.transition() | |
.duration(duration) | |
.delay((!div.exit().empty() + !div.enter().empty()) * duration) | |
.style("background", "green") | |
.style("opacity", 1); | |
// 1. exit | |
div.exit() | |
.style("background", "red") | |
.transition() | |
.duration(duration) | |
.style("opacity", 0) | |
.remove(); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment