Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Feb 9, 2016
Embed
What would you like to do?
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