Javascript 脱机/IDE将图形导出为SVG或PNG图像的方法

我遇到过许多关于将d3.js支持的视觉效果导出到图像文件中的各种方法的主题。这些解决方案有时可能对我有用，但我有很大的动力去寻找一个与之相当的离线/IDE。在我的例子中，有很多时候我在没有互联网的情况下编程，但是如果能够导出图形的静态PNG以用于文档/报告，我仍然会受益匪浅

即使我将相关库复制到本地主机，我也不认为我可以导出图像。如果我没有弄错的话，到目前为止，可用的解决方案需要互联网来对文件进行排队。我的意思是，这是其中一种方法的一个片段：

function getSVGString( svgNode ) {
    svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');
    var cssStyleText = getCSSStyles( svgNode );
    appendCSS( cssStyleText, svgNode )

    var serializer = new XMLSerializer();
    var svgString = serializer.serializeToString(svgNode);
    svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink=') // Fix root xlink without namespace
    svgString = svgString.replace(/NS\d+:href/g, 'xlink:href') // Safari NS namespace fix

另一个原因是，如果我不需要为用户提供文件，我只想有一个PNG供我自己使用，在我看来，将有一个更简单的方法来实现这一点。因此，我不必像上面的例子那样经历如此复杂的步骤

我可能是错的，不管怎样，请让我知道你的想法

更新：

单独尝试：

这是一种工作方式，png下载至少可以驱动，但它没有裁剪正确。图表的大部分被裁剪掉了。我不知道如何解决这个问题。我也不确定是否可以指定文件类型。有时我也会选择下载“graph.svg”

更新：

我坚持不懈的猴子见猴子的做法让我取得了一些进步。我现在可以通过正确的裁剪保存为png。但是，我无法将图形另存为SVG。这很有趣，因为这是它的原始格式。我想把这个问题授予能够用我上面的一个实例演示如何将图形保存为svg的人

---

另一方面，我在我的图的index.html中包含了一个非常长的blob和文件保护程序函数，并使用一个按钮开始下载。这主要是因为我在赶时间，我开始感到绝望。最终，如果有一个更优雅的解决方案，不需要那么多的外部库，那就太好了。我还要补充一点，这种方法对于多个图来说并不理想。目前，我必须将按钮“所有函数”添加到每个index.html中，该index.html包含我要转换的图形。我不是计算机，迭代速度不够快。

我在这里看到的步骤是：

找到一种方法来获取由

D3.js

创建的内容。这可能是SVG格式的矢量文件

使用命令行工具（脱机）将SVG文件转换为光栅图像（即jpg、png）

对于第一步：

对于第二步：

其他发现：

---

我还遇到了执行您提到的两个步骤的块。实际上，这就是我在我的帖子中得到代码片段的地方。虽然它同时完成了这两个步骤，但不能脱机工作，对吗？它使用了几个XML序列化程序，比如：

svgNode.setAttribute（'xlink'，'http://www.w3.org/1999/xlink');或是否有适合脱机使用的方法？我还注意到您的第一步链接也使用了类似的xml序列化程序，您能解释一下我如何将其中任何一个用于脱机吗？我不确定，但这可能只是创建具有正确名称空间等的SVG的一种方法。。。我不认为网络上发生了什么，我采用这种方法：虽然png很有用，但SVG格式也有很多用途。这是你在这篇文章中迈出的第一步。不幸的是，这也是我被困的地方。我收到错误：无法序列化字符串，属性1不是node类型。我有一个活动的图表，我试着用它。我把代码放在第113行，就在我的
d3.csv（）
超出范围之前。