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

  发布于 2023-02-07 11:43

我正在创建D3.js动画,如下所示: Demo

假设我想在这里(或在博客上)展示我的作品.关于我能做的最好的是张贴图片:

在此输入图像描述

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

在此输入图像描述

在此输入图像描述

我想以编程方式从我的D3.js动画中获取类似的动画GIF文件.我怎样才能做到这一点?

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

1 个回答
  • 该解决方案使用一种名为LICEcap的工具,一种用于Windows和Mac的屏幕捕获实用程序.步骤如下:

      下载LICEcap并安装它.现在,如果你启动这个程序,它会有一个相当不寻常的形状,只是一个很薄的框架,框架内的所有东西都是透明的: 在此输入图像描述

      使用D3.js动画转到窗口并准备好所有内容,以便您可以在某个时刻开始动画.假设我们想要从d3js.org记录这个例子: 在此输入图像描述

      现在启动LICEcap并将其放置在动画GIF文件中您想要的区域上: 在此输入图像描述

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

      现在,您可以执行任何操作来触发动画.我按了几次GroupedStacked按钮.在我决定它足够之后,我按下Stop.生成的文件是: 在此输入图像描述

    而已!

    2023-02-07 11:46 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有