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

Question

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

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

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

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

Answer 1

这是我要做的:

下载安装phantomjs ，这是一个 headless 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 步的脚本中。