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

円グラフを作る

日頃のグラフの中でよく見かけるのが円グラフです。スマートフォンの販売シェアとかを表す時に使われます。円グラフの表示には、D3.jsに用意されたレイアウト機能を使います。D3.jsには描画機能はないですが、描画に必要なレイアウトの計算を行うために便利なレイアウト機能があります。下記の表は、D3.jsで利用できるレイアウト機能です。

種類 詳細
Chord コードレイアウト
Cluster クラスターレイアウト
Force 力学レイアウト
Hierarchy 階層化レイアウト
Histgram 度数分布図
Pack パックレイアウト(Hierarchyの一種)
Partition パーティションレイアウト(Hierarchyの一種)
Pie 円レイアウト
Stack 積み上げレイアウト
Tree ツリーレイアウト(Hierarchyの一種)
Treemap ツリーマップレイアウト(Hierarchyの一種)

レイアウト機能を利用すると複雑な計算をD3.jsで行うので、複雑なレイアウトも簡単に実現することができます。

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

D3.jsのレイアウト機能はd3オブジェクト内にあるlayoutオブジェクトに格納されています。円グラフの場合はpie()メソッドとして定義されており、d3.layout.pie()とすることでレイアウト機能を利用することができます。d3.layout.pie()は数値を返すのではなく関数(オブジェクト)を返します。この関数により扇形の座標計算をします。

円グラフを表示するには、ほかにも円グラフのサイズの情報が必要です。d3.layout.pie()で用意した関数では、扇形の座標を計算した結果を返しますが、円グラフ全体のサイズは計算されません。円グラフ全体の処理をしたいときは、d3.svg.arc()を使います。円グラフを表示するには半径の指定しなければなりません。この半径の指定はouterRadius()メソッドです。パラメーターには円グラフの半径を指定します。円蔵具の内径をinnerRadius()メソッドで指定することができます。内径を指定するとドーナッツ型の円グラフを表示することができます。

必要な数値が揃ったので、今まで通りdata()メソッドを使いデータセットと要素を連結します。ただ今回は、 data(pie(arrData))のとして、d3.layout.pie()を使って用意した扇形の計算を行う関数を呼んで処理しなければなりません。この処理を忘れると円グラフが表示されません。

コメント

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