给定D3js代码 ,例如:
var square= 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"); } square(); svg { border: 1px solid grey;} /* just to visualized the svg file's area */ <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <body></body>
如何使用我的D3js代码和NodeJS生成正确的独立* .svg文件?
Github存储库 svgcreator.node.js 可以尝试。
D3完全不关心实际生成SVG的原因。仅创建SVG的主要问题是您不能使用Javascript,这当然意味着您不能使用D3。除了基本的禁忌外,没有什么可以阻止您了:)
概念验证: 受其他答案的启发,下面是一些使用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", 100); svg.append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 80) .attr("height", 80) .style("fill", "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在评论中指出的那样,您可能需要jsdom的版本3才能起作用。