| 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> |
