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

Question

我找到了几个如何导出D3图表并将其保存为图像的示例，但不幸的是没有一个适合我。 首先，我尝试使用一个非常简单的版本来转换此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类来保持生成和可导出图像中的样式。