2013-09-16
サーバーサイドでD3.jsを使うにあたり「GUNMA GIS GEEK 」を参考にさせて頂いたが、簡単ではなかったので本サイトなりに注意点等をまとめてみる。
なお、サーバーサイドでD3.jsを使う（本サイトの）目的は、WEBサーバー（Ubuntu 12.04.3 LTS）にてNode.js＋D3.jsを使用してSVGファイルを生成し、そのファイルをブラウザのIMG要素にて参照・表示させることにある。
１．準備
まず、Node.jsおよびD3.jsの現時点の最新版をサーバにインストールする。詳細は過去の投稿 を参照。概要は以下のとおり。
node-v0.10.18.tar.gzのビルド・インストール（パッケージ版はバージョンが古いため）npmコマンドにてD3.jsをインストール（-g（Global install）付き）サンプルコードを実行（NODE_PATH環境変数を設定）
また、svgファイルを置く予定のWEBサイトの.htaccessファイル等に以下を追記しておく。
AddType image/svg+xml .svg２．ひな形
サーバーサイドで実行する.jsファイルのひな形（JSONファイルを読み込んで、SVGファイルを出力する）の構成は以下のようになる。
var d3 = require("d3");
/* サイズ（650×250）やマージンを定義する */
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 650 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
/* svgタグを生成する */
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("version", "1.1")
.attr("xmlns", "http://www.w3.org/2000/svg");
/* CSSを記述するためのstyleタグを生成する */
svg
.append("defs")
.append("style")
.attr("type", "text/css")
.text("..."); // ここにCSSの内容を記述する。
/* JSONファイルを読み込む */
var data = require('./data.json');
/* dataを元に、svg変数に様々な操作等を行い、SVGデータを生成する */
...
/* SVGファイルのお約束（？）を出力する */
console.log('<?xml version="1.0" standalone="no"?>');
console.log('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">');
/* SVG要素を出力する */
console.log(d3.select("body").node().innerHTML);SVGとCSSとの関連付けについては、上記の方法（defs/styleタグを使用する）の他に、「外部ファイル化する」方法と「個々の要素にstyle属性を都度記述する」方法がある。詳細はこのあたり （日本語 ）を参照。
３．サンプルコード
sysstatで収集したCPU使用率のデータから折れ線グラフを生成するD3.jsのサンプルコードを以下に示す。なお、本サンプルは、D3.js本家のGalleryにある「Multi-Series Line Chart 」を参考にしている。
４．実行結果
jsonファイルとjsファイルを同じディレクトリに格納し、nodeコマンドを実行する。
$ NODE_PATH=/usr/local/lib/node_modules node sar-u2svg.js > sar-u.svg生成されたSVGファイルをIMGタグで表示すると以下となる。
%idle平均99.62だからね。。(´・ω・｀)
