创建GIF动画文件出来D3.js动画 [英] Creating animated GIF files out of D3.js animations
问题描述
我创建D3.js动画，就像这样： <大骨节病>演示
I am creating D3.js animations, like this: Demo
比方说，我想present我在这里的工作（或在博客上）。关于我能做的最好的是后一个画面：
Let's say I want to present my work here (or on a blog). About the best I can do is post a picture:
在另一方面，如果是我，比方说，使用Python库 Matplotlib 数据可视化，我可以生成一个GIF动画文件，并张贴在这里：
On the other hand, if I, let's say, use the Python library Matplotlib for data visualization, I could produce an animated GIF file, and post it here:
我想以编程方式获得类似GIF动画文件从我D3.js动画。我怎样才能做到这一点？
I would like to programatically obtain similar animated GIF files out of my D3.js animations. How can I do this?
请注意：我开始变得事件从 d3.transition（）工作，但到目前为止，我没有任何运气
NOTE: I started working on getting events from d3.transition(), but so far I didn't have any luck.
推荐答案
该解决方案采用一个叫做LICEcap工具，适用于Windows和Mac的屏幕捕获实用工具。步骤如下：
The solution uses a tool called LICEcap, a screen capture utility for Windows and Mac. Steps are following:
-
下载LICEcap 并安装它。现在，如果你启动这个程序，它会具有相当不寻常的形状，只是一个细框，和里面的东西框将是透明的：
Download LICEcap and install it. Now, if you start this program, it will have a rather unusual shape, just a thin frame, and everything inside the frame will be transparent:
去你的D3.js动画和prepare一切窗口，让你可以在某些时候开始动画。比方说，我们要记录从d3js.org这个例子：
Go to the window with your D3.js animation and prepare everything so that you could start animation at some point. Let's say we want to record this example from d3js.org:
现在开始LICEcap并将其定位在你想在你的动画GIF文件的区域：
Now start LICEcap and position it over the area you want to have in your animated GIF file:
请确保您在左下角的编辑框中输入至少20 FPS ，否则记录将是低质量。 preSS纪录。首先会出现一个对话框，并选择在这里，你是否希望你的GIF文件是在一个无限循环，或者只是重复一次，或任意次数。另外一个有趣的选项是添加一些视觉线索的鼠标点击。同时选择文件名，preSS保存。
Make sure that you enter at least 20 FPS in the bottom left edit box, otherwise the recording will be low quality. Press record. A dialog will first appear, and you choose here whether you want your GIF file to be in an infinite loop, or just repeated once, or any number of times. Also an interesting option is to add some visual clues for mouse clicks. Choose also filename, and press Save.
现在你做你必须做的触发动画。我pressed按钮的分组的和的堆叠的好几倍。之后，我决定这是不够的，我pressed的停止的。得到的文件是：
Now you do whatever you have to do to trigger animations. I pressed buttons Grouped and Stacked several times. After I decided it's enough, I pressed Stop. The resulting file is:
这就是它！
这篇关于创建GIF动画文件出来D3.js动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
