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