首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >以编程方式将D3.js图形导出到静态SVG文件

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

Stack Overflow用户
提问于 2013-08-15 03:17:09
回答 2查看 12.1K关注 0票数 20

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

我想以编程方式将这些图形导出为纯SVG。我想不出该怎么做。

我找到的最接近的解决方案是:Convert JavaScript-generated SVG to a file --但问题是我需要通过编程来完成它,而不是使用需要手动单击/保存的工具,如Chrome开发人员工具或SVG Crowbar。

我更喜欢使用Python,但在这一点上我对任何工具/编程语言都是开放的。

EN

回答 2

Stack Overflow用户

发布于 2014-08-09 12:53:18

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

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

它从命令行运行,它的工作方式是启动PhantomJS,将其指向一个html文件(在命令行中传递),然后捕获它在页面上找到的第一个SVG元素。

您还可以通过命令行选项传入一个id,通过id选择一个SVG元素。

程序的核心是这个函数:

代码语言:javascript
复制
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;
}
票数 4
EN

Stack Overflow用户

发布于 2013-08-15 03:54:32

你可以用phantomJS做到这一点。它是一个无头的web浏览器,所以你可以编写一个脚本来从你的页面中提取svg并将其写入文件。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18240391

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档