如何将D3 v4图表保存为图片

Question

我找到了几个如何导出 D3 图表并将其另存为图像的示例，但不幸的是 none 对我有用。首先，我尝试使用一个非常简单的版本来转换此 svg 并将其添加到 DOM:

let html = self.svg
        .attr("version", 1.1)
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .node().parentNode.innerHTML;

let imgsrc = 'data:image/svg+xml;base64,' + btoa(html);
    let img = '<img src="' + imgsrc + '">';
    self.D3.select("#svgdataurl").html(img);

但是我得到这个错误：

知道发生了什么吗？

Answer 1

问题很明显了。我有另一个元素与 SVG 共享同一个容器，这是导致问题的原因。另一方面，我不得不在 D3 对象创建中包含样式，而不是使用 css 类将样式保留在生成和可导出的图像中。

如何将D3 v4图表保存为图片

How to save D3 v4 chart as a picture

charts

export

d3.js