将d3 html转化为svg,以编程方式将D3.js图形导出到静态SVG文件

我正在以编程方式生成大量D3图。 它们当前由带有SVG，CSS和JS的HTML组成。

我想以编程方式将这些图形导出到纯SVG。 我在弄清楚如何做到这一点时遇到了麻烦。

我找到的最接近的解决方案是：将JavaScript生成的SVG转换为文件-但问题是我需要以编程方式进行操作，而不是使用需要手动单击/保存的工具(例如Chrome Developer Tools或SVG Crowbar)。

我更喜欢使用Python，但目前我可以使用任何工具/编程语言。

另请参阅stackoverflow.com/questions/19080929

这就是我要做的：

下载并安装phantomjs，这是一个无头的Webkit浏览器，可以从命令行运行并通过脚本自动运行。

将此JavaScript保存为renderHTML.js：

var args = require('system').args,

page = require('webpage').create(),

url = args[1];

page.onConsoleMessage = function (msg) {

console.log(msg);

};

page.onLoadFinished = function() {

page.evaluate(function() {

console.log(document.documentElement.outerHTML);

});

phantom.exit();

};

page.open(url);

使用上面的脚本运行phantomjs并指定要渲染的网址，如下所示：

phantomjs renderHTML.js {urltorender} > {localfiletosave}

现在，您可以在指定的URL处获得文档的整个HTML内容，包括通过javascript(直到页面加载)在本地文件中完成的动态内容修改。使用您喜欢的任何语言对本地文件进行后期处理，以满足您的要求。

如果在保存文件之前需要进一步的JavaScript修改，则可以使用phantomjs api调度和/或等待事件，然后再调用console.log。只需在步骤2中修改脚本即可。

如果您碰巧知道并喜欢javascript，则可以跳过第4步，然后将要记住的任何"后期处理"直接放入第2步的脚本中。

可以从NodeJS的入门者那里了解一下{urltorender}是什么，还是举个例子。 您的意思是：phantomjs renderHTML.js homeDocumentsD3js > myfile.svg？

更多类似：phantomjs renderHTML.js http:example.comsomepage.html > myfile.svg或phantomjs renderHTML.js file:homesomepage.html > myfile.svg

我写了一个简短的Javascript程序来做到这一点。

您可以通过运行npm install -g playfair将其从npm移除(代码在GitHub上的manleyjster/playfair)。

它从命令行运行，并通过启动PhantomJS并将其指向html文件(您在命令行中传递)，然后捕获在页面上找到的第一个SVG元素来工作。

您还可以通过命令行选项传入ID，以按ID选择SVG元素。

程序的关键是这个功能：

function getSvg(selector) {

var svgNode, tmp;

svgNode = document.querySelector(selector);

if (svgNode) {

tmp = document.createElement('div');

tmp.appendChild(svgNode);

result = { text: tmp.innerHTML };

} else {

result = {};

}

return result;

}

您可以使用phantomJS做到这一点。它是无头的网络浏览器，因此您可以编写脚本以从页面中提取svg并将其写入文件。