Question

鉴于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");
}

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

Answer 1

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。使用节点包管理器（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版来实现这个目的。

Answer 2

我最近想做的就是问here。我被指向phantomJS。使用PhantomJS，我创建了一个JS -

<强> svggen.js：

var page = require('webpage').create(),
    url = 'http://www.example.com/wordcloud.html';

page.open(url, function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {
        var svgData = page.evaluate(function(s){
                var serializer = new XMLSerializer();
                var element = document.getElementById("svg1");
                return serializer.serializeToString(element);
        });
        console.log("<?xml version=\"1.0\"?>"+svgData);
    }
    phantom.exit();
});

<强> wordcloud.html：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.min.js"></script>
<script src="d3.layout.cloud.js"></script>
<script>
  var fill = d3.scale.category20();

  d3.layout.cloud().size([500, 800])
      .words([
        "Hello", "world", "normally", "you", "want", "more", "words",
        "than", "this"].map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
      }))
      .padding(5)
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return d.size; })
      .on("end", draw)
      .start();

  function draw(words) {
    d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 800)
        .attr("id","svg1")
        .attr("xmlns","http://www.w3.org/2000/svg")
        .attr("xmlns:xlink","http://www.w3.org/1999/xlink")
      .append("g")
        .attr("transform", "translate(150,150)")
      .selectAll("text")
        .data(words)
      .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });
  }
</script>
</body></html>

然后我跑

phantomjs svggen.js > svgFile.svg

生成的svgFile.svg是一个独立的SVG文件。对于d3cloud，请检查this。

Answer 3

node.js是要走的路。您可以使用npm直接安装d3。（它还会添加jsdom作为依赖项来提供“假”DOM。）在d3代码生成SVG之后，只需抓取其内容并写入文件。

Answer 4

这是一个非常短的节点脚本，它将svg输出到用d3.js生成的stdout。

#!/usr/bin/env node

var d3 = require("d3"),
    jsdom = require("jsdom").jsdom;

var body = d3.select(jsdom().documentElement).select("body");

var svg = body.append("svg");
process.stdout.write(body.node().innerHTML);

Link to snippet on bl.ocks.org

Answer 5

如果你不想使用node.js，那么使用phantomJs，在这里你可以找到一个演示 https://github.com/subramanya2107/d3js-phantomjs-demo.git

D3js：如何生成独立的SVG文件？（的NodeJS）

5 个答案:

D3js：如何生成独立的SVG文件？ （的NodeJS）

5 个答案:

D3js：如何生成独立的SVG文件？（的NodeJS）