Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 9, 2016 02:03
Show Gist options
  • Save mbostock/5779682 to your computer and use it in GitHub Desktop.
Save mbostock/5779682 to your computer and use it in GitHub Desktop.
Exit, Update, Enter
license: gpl-3.0
<!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