【node.js+D3.js】サーバーサイドD3

D3にはnode.js用のモジュールがあるのでサーバーサイドで使用するのも簡単です。npmからインストールできます。

$ npm install d3

1	$ npm install d3

残念なことにwindowsではjake(JavaScript build tool)がうまくインストールされないらしくビルドの途中でエラーを吐いてとまります。

サンプルコード

内部ではjsdomを使ってDOM操作を行っています。基本的にはフロントエンドでD3を使用するのと変わりません。

var d3 = require("d3");
var svg = d3.select("body")
	.append("svg")
	.attr({
		"xmlns": "http://www.w3.org/2000/svg",
		"width": 750,
		"height": 750
	});
  
  svg.append('circle')
	.attr({
		cx:100,
		cy:100,
		r:80,
		fill:'red'
	})
  

console.log(d3.select('body').node().innerHTML); //JSDOMから出力

var d3 = require("d3");

var svg = d3.select("body")

.append("svg")

.attr({

"xmlns": "http://www.w3.org/2000/svg",

"width": 750,

"height": 750

});

svg.append('circle')

.attr({

cx:100,

cy:100,

r:80,

fill:'red'

})

console.log(d3.select('body').node().innerHTML); //JSDOMから出力

使い方

$ node testd3.js > test.svg

1	$ node testd3.js > test.svg

下記SVGファイルが作成されます

<svg xmlns="http://www.w3.org/2000/svg" width="750" height="750">
<circle cx="100" cy="100" r="80" fill="red"></circle>
</svg>

</svg>

D3の強力なGeo Projections機能などを使ってサーバーサイドで地図やグラフを生成し出力することができます。

サンプルコード

投稿者: shimizu