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

  显示原文与译文双语对照的内容
0 0

我正在研究的大量D3的图形编程方式。 它们目前由HTML与SVG,css和JS 。

我希望这些图表导出为纯SVG programmatically 。 我无法在想清楚如何执行此操作。

我发现最接近的解决方案如下: Convert Javascript SVG生成到文件但是问题是,我需要编程方式去做,而不是按之类的工具Chrome开发者工具或SVG Crowbar这需要手动clicking/saving 。?

我更愿意使用Python,但这时我打开任何tools/programming语言。

时间:原作者:4个回答

0 0

下面我就会这么做:

  1. 下载并安装 phantomjs,这是一个headless web kit就是浏览器可以运行从命令行和自动化脚本。

  2. 该java script保存为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. 你现在拥有了完整的HTML内容文档中的指定URL,包括动态内容修改完成通过Javascript ( 页面加载) 之前在本地文件中。 后期处理本地文件,使其符合要求使用你喜欢的任何语言。

如果需要更多java script修改将在保存文件之前,可以使用PhantomJS api来调度和/ 或等待事件,然后再调用console 。log 。 只是在步骤2 中修改脚本。

如果你碰巧知道就像java script,你可以请跳过步骤4 并将任何" 后处理" 被美国占领直接在脚本步骤2 中。

原作者:
0 0

方法是提供,phantomJS 。 其无外设网页浏览器拔掉svg从页中,因此你可以编写一个脚本并将其写入文件。

原作者:
0 0

我编写了一个简短Javascript程序来做这个。

可以拿走 npm通过运行 npm install -g playfair( 代码位于GitHub在manleyjster/playfair) 。

它运行从命令行,它的工作原理是触发向上PhantomJS,将它指向你传入一个html文件( 它在命令行上),然后捕获第一个SVG元素,该元素在页面上找到。

也可以传入一个id通过命令行选项来选择一个SVG元素按id 。

此函数程序的正题:

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;
}
原作者:
...