A test of chained transition using d3-transition’s new d3.active.
forked from mbostock's block: Chained Transitions
license:gpl-3.0 |
A test of chained transition using d3-transition’s new d3.active.
forked from mbostock's block: Chained Transitions
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
max-width: 960px; | |
margin: 1px; | |
} | |
div { | |
width: 10px; | |
height: 10px; | |
margin: 1px 0 0 1px; | |
float: left; | |
background: #eee; | |
display: inline-block; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v4.0.0-alpha.16.min.js"></script> | |
<script> | |
var n = 4002; | |
var whiteblue = d3.interpolateRgb("#eee", "steelblue"), | |
blueorange = d3.interpolateRgb("steelblue", "orange"), | |
orangewhite = d3.interpolateRgb("orange", "#eee"); | |
d3.select("body").selectAll("div") | |
.data(d3.range(n)) | |
.enter().append("div") | |
.transition() | |
.delay(function(d, i) { return i + Math.random() * n / 4; }) | |
.ease(d3.easeLinear) | |
.on("start", function repeat() { | |
d3.active(this) | |
.styleTween("background-color", function() { return whiteblue; }) | |
.transition() | |
.delay(1000) | |
.styleTween("background-color", function() { return blueorange; }) | |
.transition() | |
.delay(1000) | |
.styleTween("background-color", function() { return orangewhite; }) | |
.transition() | |
.delay(n) | |
.on("start", repeat); | |
}); | |
</script> |
�PNG | |