从D3.js动画创建动画GIF文件

Question

我正在创建D3.js动画，如下所示：Demo

假设我想在这里（或在博客上）展示我的作品。关于我能做的最好的事情是张贴图片：

另一方面，如果我，让我们说，使用Python库Matplotlib进行数据可视化，我可以生成动画GIF文件，并在此处发布：

我想以编程方式从我的D3.js动画中获取类似的动画GIF文件。我怎么能这样做？

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

Answer 1

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

1. Download LICEcap并安装它。现在，如果你开始这个程序，它会有一个相当不寻常的形状，只是一个很薄的框架，框架内的所有东西都是透明的：

2. 使用D3.js动画转到窗口并准备好所有内容，以便您可以在某个时刻开始动画。假设我们想要从d3js.org记录这个例子：

3. 现在启动LICEcap并将其放在您想要在动画GIF文件中的区域上：

4. 确保在左下方的编辑框中输入至少20 FPS，否则录制质量不佳。记录。将首先出现一个对话框，您可以在此处选择是要将GIF文件置于无限循环中，还是仅重复一次或任意次。另外一个有趣的选择是为鼠标点击添加一些视觉线索。选择文件名，然后按“保存”。

5. 现在，您可以执行任何操作来触发动画。我按了 Grouped 和 Stacked 按钮几次。在我确定它足够之后，我按停止。生成的文件是：

就是这样！