スポンサーリンク
スポンサーリンク

パックレイアウトの生成

パックレイアウトは階層(親子)関係を利用してチャートを表すものです。D3.jsではパックレイアウトは階層化レイアウト機能の1つとしてあります。

パックレイアウト作成の基本

パックレイアウトを作成するには階層化されたJavaScriptオブジェクトがなければなりません。パックレイアウトに最低限必要なデータは、親となるデータです。

簡単に言うと、下記のようなvalueプロパティだけあれば大丈夫です。

valueはパックレイアウトでデフォルトで使用されているプロパティ名です。value以外の値を使用したいときは、専用のメソッドを使わなければなりません。パックレイアウトを使用するには、d3.layout.pack()メソッドを使います。パックレイアウトは表現する範囲をsize()メソッドで指定します。パラメータは配列形式で横幅、高さを指定できます、

後は、今までと同じようにsvg要素に対してcircle要素を追加します。違う点はデータセットの部分です。data()メソッドには、下記のようにして、nodes()メソッドを使う必要があります。

上記のようにデータを設定するとD3.jsの内部で計算が行われて、以下の表のプロパティが計算が実行されます。

プロパティ名 詳細
parent 親階層のノード。ルート(一番上の階層)の場合はnull
children 子ノード。ない場合はnull
value
depth 階層の深さ、ルートの場合は0
x 円の中心X座標
y 円の中心Y座標
r 円の半径

attr()メソッドを使い要素に値を設定する場合は、上記の表のプロパティから読み出します。

サンプルコードの実行結果はこちら

上記の散布うコードを実行するとデータが1つだけなので1つの円しか表示されません。次は、円の中に円が入っている(階層化されている・入れ子になっている)データを用意します。入れ子にするにはchildrenプロパティを使い配列形式データを用意します。
データはvalueプロパティを使って指定します。下記のように書きます。

サンプルコードの実行結果はこちら

●HTMLファイルは一番上のサンプルと同じです。
●JSファイルも上記のvar packData の箇所のみ変更しているだけです。

上記のファイルを実行すると円の中に円が表示されています。ということは、children配列の中にchildrenを入れれば、いくらでも入れ子にすることができます。その計算をD3.js側で自動で行ってくれます。下記のサンプルコードを実行すると確認できます。

サンプルコードの実行結果はこちら

●HTMLファイルは一番上のサンプルと同じです。
●JSファイルも上記のvar packData の箇所のみ変更しているだけです。

円にアニメーションと色を付けてみます。

円のサイズを0に指定してkらtransition()メソッドを使いアニメーション処理を行うようにしてます。transition()メソッド、duration()メソッド後に、最終的な円のサイズを指定すれば完了です、

サンプルコードの実行結果はこちら

●HTMLファイルは一番上のサンプルと同じです。

コメント

タイトルとURLをコピーしました