Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 9, 2016 01:52
  • Star 2 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/5d8039fb983a29e2ad49 to your computer and use it in GitHub Desktop.
Named Transitions
license: gpl-3.0

D3 3.5 allows concurrent transitions on elements through the use of named transitions. Transitions of the same name are still exclusive, but by giving transitions different names — such as “twizzle” and “plonk” — transitions can run at the same time on the same element without interference.

(You could do this before by manually creating transition locks or using nested elements, but this new approach is much cleaner!)

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: black;
stroke: red;
stroke-linejoin: round;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")")
.append("path")
.attr("d", d3.svg.symbol().type("cross").size(50000))
.call(twizzle, 20000)
.call(plonk, 2000);
function twizzle(path, duration) {
path.transition("twizzle")
.duration(duration)
.attrTween("transform", function() { return d3.interpolateString("rotate(0)", "rotate(720)"); })
.transition()
.duration(Math.random() * duration)
.each("end", function() { path.call(twizzle, duration); });
}
function plonk(path, duration) {
path.transition("plonk")
.duration(duration)
.style("stroke-width", "30px")
.transition()
.style("stroke-width", "0px")
.transition()
.duration(Math.random() * duration)
.each("end", function() { path.call(plonk, duration); });
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment