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

我遇到过很多关于将d3.js支持的视觉效果导出为图像文件的各种方法。这些解决方案有时可能适用于我，但我有一个很大的动机去找到与此相当的离线/ IDE。在我的情况下，当我编程时没有访问互联网的时候有很多时间，但是仍然可以从导出用于文档/报告的图形的静态PNG中受益匪浅。离线/ IDE将图形导出为SVG或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

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

更新：

我坚持猴子看猴子的做法是让我有所进步。我现在可以用正确的剪裁保存为png。但是，我无法将图形保存为SVG。这很有趣，因为那是它的原始格式。我想把这个问题授予某人，他可以用我上面的一个实例演示如何将图保存为svg。

在附注中，我在图形的index.html中包含了一个非常冗长的blob和文件保护函数，并使用按钮开始下载。这主要是因为我反对，我开始变得绝望。最终，如果有一个更优雅的解决方案，并不需要那么多的外部库，那就太棒了。让我也加入这个方法对于多个图不是理想的。我现在必须将所有函数的按钮添加到每个有我想要转换的图的index.html。我不是电脑，我不能够快速迭代。

来源

2017-03-02 Arash Howaida

我在这里看到的步骤是：

找到一种方法，采取什么样的已被D3.js创建。这可能是SVG格式的矢量文件。
使用命令行工具（离线）将SVG文件转换为光栅图像（即jpg，png）...

对于第一步骤：

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

对于第二步骤：

其他发现：

来源

2017-03-02 09:56:37 tgogos

我也碰到该块，做双方你提到的步骤。实际上，这是我从我的帖子中获取代码段的地方。虽然它执行了两个步骤，但它不能脱机工作吗？它使用了几个XML序列化程序，如：'svgNode.setAttribute（'xlink'，'http://www.w3.org/1999/xlink'）;'或者是否有适应离线使用的方法？我也注意到你的第一步的链接也使用了一个类似的xml序列化器，你能解释我可以如何适应这些脱机？ –

我不确定，但也许这只是一种方法来创建一个SVG与正确的[结构]（https://www.w3.org/TR/SVG/struct.html），名称空间等...我不要以为网上发生了什么事情。 – tgogos

测试它，它可以离线工作... – tgogos

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

回答

相关问题