从D3.js动画创建动画GIF文件 [英] Creating animated GIF files out of D3.js animations

问题描述

我正在创建D3.js动画，如下所示：用于数据可视化，我可以生成一个动画GIF文件，并张贴在这里：

img src =https://i.stack.imgur.com/80Ur0.gifalt =输入图片说明here>>

我想以程序化的方式获取类似的动画GIF文件的D3.js动画。

注意：我开始从 d3.transition（）获取事件，

解决方案

解决方案使用了一个名为LICEcap的工具，苹果电脑。步骤如下：

1. ，否则录制会质量较低。按记录。将首先出现一个对话框，您可以在此处选择是要GIF文件处于无限循环中，还是只重复一次或任意次。另外一个有趣的选择是添加一些视觉线索的鼠标点击。选择文件名，然后按保存。
   >




2. 现在你可以做任何你必须做的事来触发动画。我按了按钮分组和堆叠多次。在我决定了就够了之后，我按下了停止。生成的文件是：
   >

就是这样！

I am creating D3.js animations, like this: Demo

Let's say I want to present my work here (or on a blog). About the best I can do is post a picture:

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:

I would like to programatically obtain similar animated GIF files out of my D3.js animations. How can I do this?

NOTE: I started working on getting events from d3.transition(), but so far I didn't have any luck.

解决方案

The solution uses a tool called LICEcap, a screen capture utility for Windows and Mac. Steps are following:

1. 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:

2. 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:

3. Now start LICEcap and position it over the area you want to have in your animated GIF file:

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

5. 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:

That's it!

这篇关于从D3.js动画创建动画GIF文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！