javascript - 将图形导出为 SVG 或 PNG 图像的离线/IDE 方法

Question

我遇到过许多关于将 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供我自己使用，在我看来，会有一种更简单的方法来实现这一点。因此我不必像上面的例子那样经历如此复杂的步骤。

无论如何，我可能是错的，请让我知道你对此的想法。

更新:

Working example of my problem

单独尝试: Try #2

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

更新:

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

顺便说一句，我在图表的 index.html 中包含了一个非常长的 blob 和文件保护函数，并使用按钮开始下载。这主要是因为我在争分夺秒，我开始变得绝望。最终，如果有一个更优雅的解决方案不需要那么多外部库，那就太好了。我还要补充一点，这种方法对于多个图表来说并不理想。我目前必须将按钮所有功能添加到每个具有我想要转换的图表的index.html。我不是计算机，我的迭代速度不够快。

Answer 1

我在这里看到的步骤是:

1. 找到一种方法来获取 D3.js 创建的内容。这可能是 SVG 格式的矢量文件。
2. 使用命令行工具(离线)将 SVG 文件转换为光栅图像(即 jpg、png)...

第一步:

• How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?

第二步:

• How to convert a SVG to a PNG with Image Magick?
• imagemagick
• inkscape

其他发现:

• Export SVG D3 visualization to PNG or JPEG
• Saving Browser-based SVGs as Images