Pocket

HTMLを準備

D3.jsを使用して円グラフを作成します(v4:バージョン4)。jQueryでプラグイン化することを前提に作成したいので、jQueryもCDNで読み込みます。まずは基本のHTMLコードを以下のように書きます。

11行目のid="pieChart"の要素内に円グラフを表示するためのプラグラムを、d3.pie-chart.jsファイルにコードを書いていきます。

円グラフを表示するsvg要素を設定

まずは円グラフを表示するsvg要素を指定したID属性の要素内に生成します。以前に書いた記事を参考にjQueryのプラグインとして作成していきます。

id="pieChart"内にsvg要素を追加(append)して高さと幅を設定しました。これで円グラフの表示エリアを確保。

データを渡して円グラフの表示

プラグインにデータを配列で渡して、それを円グラフで表示させます。とりあえず、コード。

12行目にあるようにdataパラメータに配列でデータを渡しています。これをプラグイン側で受け取って表示させます。次にJavaScript側。

6〜11行目でプラグインで使用するパラメータの初期値を設定しています。

パラメータ初期値用途
data array [](空の配列) グラフのデータ配列(数値)
color array d3.schemeCategory10 グラフの色配列(16進数文字列)
height integer 250 svg要素の高さ(px)
width integer 250 svg要素の幅(px)
innerRadius integer 0 円グラフの内円の直径(px)
outerRadius integer 100 円グラフの外円の直径(px)

色の初期値はD3.jsが準備している色セットを指定できます。こちらを参照してください。

d3定義を変数に保存

17〜19行目でd3のarc(アーク:描く弧の大きさ設定)・pie(円グラフ定義)・colorSet(グラフの色定義)をそれぞれ変数に保存します。

Pathの設定

31〜38行目でPathの生成をしています。

  • selectAll("path") – svg要素の子要素であるpath要素を全て選択
  • data(pie(setting.data)) – データ配列を円グラフの情報としてセット
  • enter() – データ配列の要素数分繰り返し
  • append("path") – path要素を生成
  • function(d,i) – dはdataの値、iは添字(0から)をenterの回数分順番に取得

Arc(弧)の設定

40〜41行目。path要素にd属性をつけて弧を設定します。d3.arc()の定義値をセットしてあげればOK。
できた!\(^o^)/
これで円グラフが描画できます。次はこれにアニメーションを追加しようかな。

d3.jsで生成した円グラフ

関連記事

GitHub
※D3-sample/basic_charts/pie_chart/内のファイル