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行目でプラグインで使用するパラメータの初期値を設定しています。
パラメータ | 型 | 初期値 | 用途 |
---|---|---|---|
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-sample
- Author : Kazuya Takami
- Repository URL : https://github.com/miiitaka/D3-sample