d3.js - 将 D3 图表另存为图像

Question

我在应用程序中创建了很多 D3 图表。

但现在我的要求是以任何格式保存 D3 图表，如 png/gif 或 pdf。

我搜索了很多，每个人都说我们可以使用 Canvas 。

任何人都可以为此提供任何示例或链接...

从概念上讲，我很清楚

使用 canvg JavaScript 库通过 Canvas 呈现 SVG 图像:https://github.com/gabelerner/canvg

根据以下说明从 Canvas 捕获编码为 JPG(或 PNG)的数据 URI:将 HTML Canvas 捕获为 gif/jpg/png/pdf？

如果有人已经实现了我想要的，那么你能分享一下代码吗？

Answer 1

搜索了很多资源，尝试了很多东西，我找到了SaveSvgAsPng
在 GitHub 上。

它很容易实现和使用同一链接上 README 页面上的可用资源。

步骤

将 Javascript 库添加到您的项目中。

编写一个带有 saveSvgAsPng 调用的函数，根据需要包含其他选项。

使用示例

saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png");

使用 d3.js 的示例函数

// I have button in html with id="download"
d3.select("#download")
.on('click', function(){
    // Get the d3js SVG element and save using saveSvgAsPng.js
    saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png", {scale: 2, backgroundColor: "#FFFFFF"});
})

对于这个例子，我的地 block 对于网页来说很小，所以将大小增加了一倍以供下载，而不是默认的透明背景，我改为白色。