Node.js   发布时间:2022-04-24  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了node.js – D3js:如何生成独立的SVG文件? (的NodeJS)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
给出一个D3js代码,such as

function () {
    var svg = window.d3.select("body")
        .append("svg")
        .attr("width",100)
        .attr("height",100);

    svg.append("rect")
        .attr("x",10)
        .attr("y",10)
        .attr("width",80)
        .attr("height",80)
        .style("fill","orange");
}

如何生成一个正确的独立的* .svg文件与我的D3js代码& NodeJS?

解决方法

Github仓库 svgcreator.node.js试用.

D3根本不在乎什么实际产生你的SVG.创建SVG的主要问题是您不能使用Javascript,那当然意味着您不能使用D3.除了这个基本的no-no,没有什么可以阻止你:)

概念证明:受其他答案的启发,这里有一些使用jsdom的概念验证码.

1.安装NodeJS(1).

curl http://npmjs.org/install.sh | sh       #this should work (not tested)

2.使用Node Packages Manager(2)安装jsdom:

$npm install jsdom

3.将您的D3js代码包含在一些jsdom代码中,粘贴到jsdom.node.js文件中:

var jsdom = require('jsdom');

jsdom.env(
  "<html><body></body></html>",[ 'http://d3js.org/d3.v3.min.js' ],function (err,window) {
    var svg = window.d3.select("body")
        .append("svg")
        .attr("width",100).attr("height","orange");
// PRINT OUT:
    console.log(window.d3.select("body").html());
//  fs.writeFileSync('out.svg',window.d3.select("body").html()); // or this
  }
);

4.在终端运行

$node jsdom.node.js > test.svg

stdout输出是SVG,然后将其注入test.svg文件.任务完成.

正如Gilly在评论中指出的那样,您可能需要第3版的jsdom才能使用它.

大佬总结

以上是大佬教程为你收集整理的node.js – D3js:如何生成独立的SVG文件? (的NodeJS)全部内容,希望文章能够帮你解决node.js – D3js:如何生成独立的SVG文件? (的NodeJS)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: