如何将d3.js动画导出到向量帧以创建AfterEffects序列？
如何将d3.js动画导出到向量帧以创建AfterEffects序列？
提问于 2013-05-01 08:22:40
我正在使用d3.js创建一些基本动画，例如显示两组数据之间转换的条形图动画。最终，我想把这个动画带到AfterEffects中，作为一个更大的视频的一部分。我想将web动画导出为一系列向量帧(ai或svg，如果需要，也可以是png )，以便导入After Effects或Illustrator。我该怎么做呢？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-06-27 02:55:02
对于d3.js进行转换的方式，这实际上可能是相当简单的！由于d3.js直接更改用于进行转换的DOM元素，因此您可以每隔1/30秒保存一次DOM元素。下面是一个完整的示例：
<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>最后一步是将每个输出的svg元素保存到磁盘上的单个.svg文件中(而不是像上面的示例那样将它们输出到控制台)。我还没有尝试过，但也许可以使用像FileSaver.js这样的东西。然后，可以选择使用类似ImageMagick的方法将.svg文件转换为.png文件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16310999
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号