D3js:如何生成独立的SVG文件？(的NodeJS)

Question

D3js:如何生成独立的SVG文件？(的NodeJS)

给定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();

Run Code Online (Sandbox Code Playgroud)

如何使用我的D3js代码和NodeJS生成正确的独立*.svg文件？

Answer 1

Lar*_*off 23

尝试使用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)

Run Code Online (Sandbox Code Playgroud)

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

$npm install jsdom

Run Code Online (Sandbox Code Playgroud)

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
  }
);

Run Code Online (Sandbox Code Playgroud)

4.在终端中运行

$node jsdom.node.js > test.svg

Run Code Online (Sandbox Code Playgroud)

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

正如Gilly在评论中指出的那样,你可能需要jsdom的第3版来实现这一点.

归档时间：	12 年，2 月前
查看次数：	12694 次
最近记录：	6 年前