HTMLを準備

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Pie Chart</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3.pie-chart.js"></script>
</head>
<body>
  <div id="pieChart"></div>
</body>
</html>

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

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

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

(function ($) {
  "use strict";

  $.fn.D3PieChart = function(options) {
    var defaults = {
      "height": 250,
      "width": 250
    };
    var settings = $.extend({}, defaults, options);

    return this.each(function() {
      var
        svg = d3.select("#" + $(this).attr("id"))
          .append("svg")
          .attr("height", settings.height)
          .attr("width", settings.width);
    });
  };
}(jQuery));

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Pie Chart</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3.pie-chart.js"></script>
  <script>
    $(function(){
      $("#pieChart").D3PieChart({
        "data": [50, 30, 20]
      });
    });
  </script>
</head>
<body>
  <div id="pieChart"></div>
</body>
</html>

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

(function ($) {
  "use strict";

  $.fn.D3PieChart = function(options) {
    var defaults = {
      "data": [],
      "color": d3.schemeCategory10,
      "height": 250,
      "width": 250,
      "innerRadisu": 0,
      "outerRadisu": 100
    };
    var settings = $.extend({}, defaults, options);

    return this.each(function() {
      var
        pie = d3.pie(),
        arc = d3.arc().innerRadius(settings.innerRadisu).outerRadius(settings.outerRadisu),
        colorSet = d3.scaleOrdinal(settings.color),
        svg,
        pieElement;

      // svg Setting
      svg = d3.select("#" + $(this).attr("id"))
        .append("svg")
        .attr("height", settings.height)
        .attr("width", settings.width)
        .append("g")
        .attr("transform", "translate(" + settings.width / 2 + "," + settings.height / 2 + ")");

      // Basic Setting
      pieElement = svg.selectAll("path")
        .data(pie(settings.data))
        .enter()
        .append("path")
        .style("fill", function(d, i) {
          return colorSet(i);
        });

      // arc Setting
      pieElement.attr("d", arc);
    });
  };
}(jQuery));

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

パラメータ型初期値用途
dataarray[]（空の配列）グラフのデータ配列（数値）
colorarrayd3.schemeCategory10グラフの色配列（16進数文字列）
heightinteger250svg要素の高さ（px）
widthinteger250svg要素の幅(px)
innerRadiusinteger0円グラフの内円の直径(px)
outerRadiusinteger100円グラフの外円の直径(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/内のファイル