我正在创建D3.js动画,如下所示: Demo
假设我想在这里(或在博客上)展示我的作品.关于我能做的最好的是张贴图片:
另一方面,如果我,比方说,使用Python库Matplotlib进行数据可视化,我可以生成一个动画GIF文件,并在此处发布:
我想以编程方式从我的D3.js动画中获取类似的动画GIF文件.我怎样才能做到这一点?
注意:我开始致力于从中获取事件d3.transition()
,但到目前为止我没有任何运气.
该解决方案使用一种名为LICEcap的工具,一种用于Windows和Mac的屏幕捕获实用程序.步骤如下:
下载LICEcap并安装它.现在,如果你启动这个程序,它会有一个相当不寻常的形状,只是一个很薄的框架,框架内的所有东西都是透明的:
使用D3.js动画转到窗口并准备好所有内容,以便您可以在某个时刻开始动画.假设我们想要从d3js.org记录这个例子:
现在启动LICEcap并将其放置在动画GIF文件中您想要的区域上:
确保在左下方的编辑框中输入至少20 FPS,否则录制质量不佳.记录.将首先出现一个对话框,您可以在此处选择是要将GIF文件置于无限循环中,还是仅重复一次或任意次.另外一个有趣的选择是为鼠标点击添加一些视觉线索.选择文件名,然后按"保存".
现在,您可以执行任何操作来触发动画.我按了几次Grouped和Stacked按钮.在我决定它足够之后,我按下Stop.生成的文件是:
而已!