如何以编程方式导出D3.js图形为静态SVG文件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (190)

我以编程方式生成大量的D3图形。它们目前由HTML与SVG,CSS和JS组成。

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

问题是我需要以编程方式执行,而不是使用像Chrome Developer Tools或需要手动点击/保存的SVG Crowbar之类的工具。

我宁愿使用Python,但在这一点上,我可以接受任何工具/编程语言。

提问于
用户回答回答于

以下是我要做的事情:

  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,指定要呈现的网址,如下所示: phantomjs renderHTML.js {urltorender} > {localfiletosave}
  4. 现在,已将指定URL中的文档的所有HTML内容都包含在本地文件中,包括通过javascript完成动态内容修改(直到页面加载)。使用您喜欢的任何语言,后处理本地文件以满足您的要求。

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

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

用户回答回答于

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

你可以npm通过运行得到它npm install -g playfair(代码在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;
}

所属标签

可能回答问题的人

  • EatRice

    16 粉丝0 提问6 回答
  • 华讯云

    0 粉丝0 提问4 回答
  • 学生

    8 粉丝476 提问4 回答
  • 不吃貓的鱼oo

    7 粉丝466 提问3 回答

扫码关注云+社区

领取腾讯云代金券