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

【问题标题】：Exporting D3.js graphs to static SVG files, programmatically以编程方式将 D3.js 图形导出到静态 SVG 文件
【发布时间】：2013-08-16 22:00:02
【问题描述】：

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

我想以编程方式将这些图形导出为纯 SVG。我很难弄清楚如何做到这一点。

我找到的最接近的解决方案是：Convert JavaScript-generated SVG to a file——但问题是我需要以编程方式执行此操作，而不是使用需要手动单击/保存的 Chrome 开发人员工具或 SVG Crowbar 之类的工具。

我更喜欢使用 Python，但此时我对任何工具/编程语言都持开放态度。

【问题讨论】：

另见stackoverflow.com/questions/19080929

标签： svg d3.js

【解决方案1】：

我为此编写了一个简短的 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;
}

【讨论】：

【解决方案2】：

我会这样做：

下载并安装 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，指定要呈现的 url，如下所示：
```
phantomjs renderHTML.js {urltorender} > {localfiletosave}
```
您现在拥有位于指定 URL 的文档的整个 HTML 内容，包括在本地文件中通过 javascript 完成的动态内容修改（直到页面加载）。使用您喜欢的任何语言对本地文件进行后处理以满足您的要求。

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

如果您碰巧知道并喜欢 javascript，则可以跳过第 4 步，将您想到的任何“后处理”直接放入第 2 步的脚本中。

【讨论】：

NodeJS 的初学者，你能澄清一下{urltorender} 是什么，或者举个例子。你的意思是：phantomjs renderHTML.js /home/<user>/Documents/D3js/ > myfile.svg?
更多类似：phantomjs renderHTML.js http://example.com/some/page.html > myfile.svg 或 phantomjs renderHTML.js file:///home/<user>/some/page.html > myfile.svg

【解决方案3】：

您可以使用phantomJS 来执行此操作。它是一个无头网络浏览器，因此您可以编写脚本从页面中提取 svg 并将其写入文件。

【讨论】：