K4750.NET

サーバーサイドD3（Yet another）

サーバーサイドでD3.jsを使うにあたり「GUNMA GIS GEEK」を参考にさせて頂いたが、簡単ではなかったので本サイトなりに注意点等をまとめてみる。

なお、サーバーサイドでD3.jsを使う（本サイトの）目的は、WEBサーバー（Ubuntu 12.04.3 LTS）にてNode.js＋D3.jsを使用してSVGファイルを生成し、そのファイルをブラウザのIMG要素にて参照・表示させることにある。


１．準備

まず、Node.jsおよびD3.jsの現時点の最新版をサーバにインストールする。詳細は過去の投稿を参照。概要は以下のとおり。

  1. node-v0.10.18.tar.gzのビルド・インストール（パッケージ版はバージョンが古いため）
  2. npmコマンドにてD3.jsをインストール（-g（Global install）付き）
  3. サンプルコードを実行（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だからね。。(´・ω・｀)