web-dev-qa-db-ja.com

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();
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ファイルを生成する方法？

node.jssvgd3.js
18
Hugolpz

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 Package 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がコメントで指摘しているように、これを機能させるにはバージョン3のjsdomが必要になる場合があります。

22
Lars Kotthoff

私は最近それをやりたかったので質問をしました ここ 。 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 を確認してください。

2
Lord Loh.

node.jsがその方法です。 npmを使用してd3を直接インストールできます。 （また、依存関係としてjsdomを追加して、「偽の」DOMを提供します。）d3コードがSVGを生成した後、その内容を取得してファイルに書き込むだけです。

1
Stephen Thomas

これは、d3.jsで生成されたsvgを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);

bl.ocks.orgのスニペットへのリンク

1
Shan Carter

node.jsを使用したくない場合は、phantomJsを使用してください。ここにデモがあります https://github.com/subramanya2107/d3js-phantomjs-demo.git

0
subbu