D3.jsで作成するグラフのプログラムの構造は
下記のように考えます。
１．データの読み込み
D3.jsではCSV(カンマ区切りのテキスト)や
TSV(タブ区切りテキスト)、XML形式などのメジャーな
データフォーマットを読み込むことができます。
プログラム内に配列やJSONデータを利用することもできます。
２．表示するグラフを決める
表示するグラフの決める個所ですが、D3.jsはデータから
表示すべき座標の値を計算して返します。
この計算を行うために、D3.jsのレイアウトオブジェクトを指定します。
自力でデータ解析してプログラムを作成できますが、大変です。
円グラフやツリーマップは、D3.jsが用意したオブジェクトを
利用して計算した方が簡単です。
３．グラフを表示するためのＳＶＧ図形要素を作成
グラフを表示するには、D3.jsではSVG要素を生成します。
DOM要素やcanvas要素も生成でできますが、D3.jsではデータ数に対応して
自動的に要素数を変化させてアニメーションさせることができ、
そのときにSVGを利用するのが良いと思います。
４．要素の属性値を変える
要素の属性値を変更する処理は大事です。
グラフをどのように見せるか、表示するかはここで決めます。
D3.jsの場合は、属性値を変更するattr()メソッドと、
スタイルを変更するstyle()メソッドをメインで使います。
５．アニメーションを付ける
D3.jsは簡単にアニメーションを行えます。transition()メソッドの後に、
変更したい属性値を指定するだけです。
６．イベントも付けたいならやる
D3.jsは、マウスのクリックなどのイベントに応じてグラフを変化させることが
できます。イベントはjQueryライブラリと同様にon()メソッドを使います。
次回はサンプルコードも交えて書いていきます。