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構造を理解していないと，”どこ”のツリーを指しているのか分からず，思うようにデータが消えませんでした．

サーバでd3.jsを使ってSVGを生成する．

環境

コード

困った所