如何将D3 v4图表保存为图片(How to save D3 v4 chart as a picture)

如何将D3 v4图表保存为图片(How to save D3 v4 chart as a picture)

我找到了几个如何导出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);

但是我得到这个错误：

任何关于发生什么的想法？

I have found several examples of how to export a D3 chart and save it as a image, but unfortunately none is working for me. First of all I'm trying with a very simple version converting this svg and adding it to the 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);

But I get this error:

Any idea about what is happening?

最满意答案

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

The problem was clear. I had another element sharing the same container with the SVG, and that was causing the problem. In the other hand i have had to include the styles in the D3 objects creation instead using css classes to keep the styles in the generated and exportable image.