Skip to content

Instantly share code, notes, and snippets.

@lewang
Forked from mbostock/.block
Last active October 13, 2015 15:07
Show Gist options
  • Save lewang/3d5b0691892a751049d6 to your computer and use it in GitHub Desktop.
Save lewang/3d5b0691892a751049d6 to your computer and use it in GitHub Desktop.
Exit, Update, Enter II
var duration = 2500;
var div = d3.select("body").selectAll("div")
.data(["enter", "update"], function(d) {
console.log("================== data", ["d", d, "textContent", this.textContent]);
var divs = Array.prototype.slice.call(document.getElementsByTagName("div"));
console.log("divs", divs);
divs.forEach(function (div, i) {
console.log("div data", [div, i, div.__data__, div.textContent]);
});
return d || this.textContent;
});
// 1. exit
var exitTransition = d3.transition().duration(duration).each(function(d, i) {
console.log("inside exit transition each", [d, i, this]);
div.exit()
.attr("foo", function(d){console.log("exit before transition", d);})
.style("background", "red")
.transition()
.attr("foo", function(d){console.log("exit after transition", d);})
.style("opacity", 0)
.remove();
});
// 2. update
var updateTransition = exitTransition.transition().each(function(d, i) {
console.log("inside update transition each", [d, i, this]);
div
.attr("foo", function(d){console.log("update before transition", d);})
.transition()
.attr("foo", function(d){console.log("update after transition", d);})
.style("background", "orange");
});
// 3. enter
var enterTransition = updateTransition.transition().each(function(d, i) {
console.log("inside enter transition each", [d, i, this]);
div.enter().append("div")
.attr("foo", function(d){console.log("enter before transition", d);})
.text(function(d) { return d; })
.style("opacity", 0)
.transition()
.attr("foo", function(d){console.log("enter after transition", d);})
.style("background", "green")
.style("opacity", 1);
});
<!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="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>window.d3 || document.write('<script src="../d3.js"><\/script>')</script>
<script src="d3run.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment