以编程方式将D3.js图导出为静态SVG文件

Question

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

我想以编程方式将这些图表导出为纯SVG.我无法弄清楚如何做到这一点.

我找到的最接近的解决方案是:将JavaScript生成的SVG转换为文件 - 但问题是我需要以编程方式进行,而不是使用Chrome Developer Tools或SVG Crowbar等需要手动点击/保存的工具.

我更喜欢使用Python,但此时我对任何工具/编程语言都很开放.

Answer 1

这就是我要做的事情:

1. 下载并安装phantomjs,这是一个无头webkit浏览器,您可以从命令行运行并通过脚本自动执行.

2. 将此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);
   

3. 使用上面的脚本运行phantomjs,指定要呈现的url,如下所示:

   phantomjs renderHTML.js {urltorender} > {localfiletosave}
   

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

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

如果你碰巧知道并喜欢javascript,你可以跳过第4步,将你想到的任何"后期处理"直接放入第2步中的脚本中.