Menu
I'm creating some basic animations using d3.js, such as bar chart animations that show a transition between two sets of data. Ultimately, I want to bring this animation into Adobe AfterEffects to include as part of a larger video. I want to export the web animation as a series of vector frames (ai or svg, or png if necessary) to import into After Effects or Illustrator. How can I do this? Thanks!
674
This actually may be quite simple with the way d3.js does transitions! Since d3.js directly changes the DOM elements for doing transitions, you can simply save the DOM elements at each 1/30th of a second. Here's a complete example:
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
svg { border:1px solid black; }
</style>
</head>
<body>
<svg id="svg" width="480" height="240" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg><br/>
<button id="b1" type="button">Animate</button>
<script type="text/javascript">
var svg = d3.select("svg");
var b1 = d3.select("#b1");
var duration = 1000;
var nTimes = 30;
var x = new XMLSerializer();
var n = 0;
function outputToConsole() {
console.log(x.serializeToString(document.getElementById("svg")));
if(n++ >= 30)
return;
setTimeout(outputToConsole, 33); // 33 milliseconds is close to 1/30th of a second
}
b1.on("click", function() {
svg.select("circle").transition().duration(duration).attr("cx",150);
outputToConsole();
});
</script>
</body>
</html>
The last step would be to save each of those outputted svg elements into individual .svg files on disk (instead of just outputting them to the console like in the above example). I haven't tried it yet, but probably one could use something like FileSaver.js. Then optionally the .svg files could be converted into .png files using something like ImageMagick.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
