d3.jsをサーバで動かした時のサンプル．
jsdomでDOMを生成して，HTMLタグ要素に変換している．
環境
- Linux
- Node.js v0.10.3x
- Node.js package
- jsdom
- d3.js
コード
処理の流れは以下．
- DOMを生成．
global.documentに渡す． - d3をロードして，DOMを参照する．
- d3.jsでDOMにデータを追加して，HTMLに出力する．
- SVGを削除
serversideJS
// モジュールの読み込み
try {
var jsdom = require('jsdom').jsdom; // d3モジュールの前にjsdomをロードしておくこと
global.document = jsdom('<html><body><div id="container"></div></body></html>'); // DOMを生成する
var d3 = require('d3');
} catch(error) {
...
}
// SVGを生成する
function createSvg() {
d3.select('#container')
.append('svg') // SVGを追加
.attr('id', 'hoge') // SVGのID
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr('version', '1.1')
// 以下，SVGに追加する要素を記述
// SVGデータをHTML形式に変換する．
var svgHtmlTag = d3.select('#container').node().innerHTML;
// => <svg id='hoge' xmlns='http://www.w3.org/2000/svg' version=''1.1''>...</svg>
output(); // どこかに出力
d3.select('#hoge').remove(); // hogeを削除．
}
(function () {
createSvg();
})();
困った所
d3.selectで要素の指定方法と範囲が良く理解できていなかったので，ハマりました．
DOM構造を理解していないと，”どこ”のツリーを指しているのか分からず，思うようにデータが消えませんでした．