Skip to content

Instantly share code, notes, and snippets.

Last active February 9, 2016 02:03
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
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">
div {
background: white;
border: solid 1px #ccc;
padding: 20px;
margin: 20px;
<script src="//"></script>
var duration = 750;
var div ="body").selectAll("div")
.data(["enter", "update"], function(d) { return d || this.textContent; });
// 2. update
.delay(!div.exit().empty() * duration)
.style("background", "orange");
// 3. enter
.text(function(d) { return d; })
.style("opacity", 0)
.delay((!div.exit().empty() + !div.enter().empty()) * duration)
.style("background", "green")
.style("opacity", 1);
// 1. exit
.style("background", "red")
.style("opacity", 0)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment