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

EN

这就是我要做的：

1. 下载并安装phantomjs，这是一个无头webkit浏览器，您可以从命令行运行并通过脚本自动运行。
2. 将此javascript另存为renderHTML.js：

var args =require(‘系统’).args，page =require(‘网页’).create()，args1= args1；page.onConsoleMessage = function (消息){ console.log (msg)；}；page.onLoadFinished = function() { page.evaluate(function() {msg })；phantom.exit()；}；page.open( url )；

• 使用上面的脚本运行phantomjs，指定要呈现的url，如下所示：

phantomjs {urltorender} > {localfiletosave}

• You现在将文档的整个renderHTML.js内容放在一个本地文件中，包括通过javascript (直到页面加载)进行的动态内容修改。使用您喜欢的任何语言对本地文件进行后期处理以满足您的要求。

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

如果你碰巧知道并喜欢javascript，你可以跳过第四步，把你所想的任何“后处理”直接放到第二步的脚本中。

我写了一个简短的Javascript程序来做这件事。

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

它从命令行运行，它的工作方式是启动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做到这一点。它是一个无头的web浏览器，所以你可以编写一个脚本来从你的页面中提取svg并将其写入文件。