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

问题描述

我正在创建 D3.js 动画，如下所示: 获取数据可视化，我可以制作一个动画 GIF 文件，然后在此处发布:

我想从我的 D3.js 动画中以编程方式获取类似的动画 GIF 文件.我该怎么做?

注意:我开始致力于从 d3.transition() 获取事件，但到目前为止我没有任何运气.

解决方案

该解决方案使用名为 LICEcap 的工具，这是一种适用于 Windows 和 Mac 的屏幕捕获实用程序.步骤如下:

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

2. 现在你可以做任何你必须做的事情来触发动画.我多次按下按钮Grouped 和Stacked.在我确定足够了之后，我按下了停止.结果文件是:

就是这样！

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