D3.js v4/v5の使い方 円グラフ(pie chart)の作成
D3で基本チャートの円グラフの作り方を紹介します。
サンプルデモ
サンプルプログラム
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Pie Chart</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // 1. データの準備 var dataset = [ { "name": "A", "value": 5 }, { "name": "B", "value": 6 }, { "name": "C", "value": 8 }, { "name": "D", "value": 1 }, { "name": "E", "value": 2 }, { "name": "F", "value": 6 }, { "name": "G", "value": 8 }, { "name": "H", "value": 6 }, { "name": "I", "value": 10 }, { "name": "J", "value": 9 } ] var width = 400; // グラフの幅 var height = 300; // グラフの高さ var radius = Math.min(width, height) / 2 - 10; // 2. SVG領域の設定 var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // 3. カラーの設定 var color = d3.scaleOrdinal() .range(["#DC3912", "#3366CC", "#109618", "#FF9900", "#990099"]); // 4. pieチャートデータセット用関数の設定 var pie = d3.pie() .value(function(d) { return d.value; }) .sort(null); // 5. pieチャートSVG要素の設定 var pieGroup = g.selectAll(".pie") .data(pie(dataset)) .enter() .append("g") .attr("class", "pie"); arc = d3.arc() .outerRadius(radius) .innerRadius(0); pieGroup.append("path") .attr("d", arc) .attr("fill", function(d) { return color(d.index) }) .attr("opacity", 0.75) .attr("stroke", "white"); // 6. pieチャートテキストSVG要素の設定 var text = d3.arc() .outerRadius(radius - 30) .innerRadius(radius - 30); pieGroup.append("text") .attr("fill", "black") .attr("transform", function(d) { return "translate(" + text.centroid(d) + ")"; }) .attr("dy", "5px") .attr("font", "10px") .attr("text-anchor", "middle") .text(function(d) { return d.data.name; }); </script> </body> </html> |
解説
1. データの準備
円グラフ描画用のデータを準備します。javascriptの標準関数 Math.minを使って円グラフの半径を設定しておきます。
1 |
var radius = Math.min(width, height) / 2 - 10; |
2. SVG領域の設定
円グラフを表示するSVG表示領域を設定します。円グラフはデフォルトでは原点が0,0点に描かれるため、画面の中央に移動します。
1 |
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); |
“g”要素を設定し、その中に円グラフのSVG要素を設定していきます。
3. カラーの設定
円グラフを塗り分けるカラースケールをD3のメソッドd3.scaleOrdinalを使って設定します。
1 2 |
var color = d3.scaleOrdinal() .range(["#DC3912", "#3366CC", "#109618", "#FF9900", "#990099"]); |
d3.scaleOrdinalはrangeで設定した配列を繰り返し呼び出す関数を設定します。今回は5色の色を呼び出す関数をcolorに設定して使います。
4. pieチャートデータセット用関数の設定
用意したデータdatasetをpieチャート用のデータに変換する関数を、D3のメソッドd3.pieを使って設定します。
1 2 3 |
var pie = d3.pie() .value(function(d) { return d.value; }) .sort(null); |
データセットを設定した関数に代入すると(pie(dataset))、変換されたデータが出力されます。
.valueで各円グラフの大きさを決める値を設定します。.sort(null)で順番を並び替えない設定をしています。.sort()は省略可能で、省略すると値が大きい順に並び替えられます。
変換後のデータは次の値が設定されたオブジェクトの配列となります。
data | 元データへの参照 |
value | 円グラフ要素の値 |
index | 円グラフ要素のインデックス(※ソート後並び替えられない) |
startAngle | 円弧の開始角度 |
endAngle | 円弧の終了角度 |
padAngle | 要素間の隙間の角度 |
5. pieチャートSVG要素の設定
設定した関数pieを使ってデータを設定します。
1 2 3 4 5 |
var pieGroup = g.selectAll(".pie") .data(pie(dataset)) .enter() .append("g") .attr("class", "pie"); |
はじめに”g”要素を設定し、その中に円グラフの扇(“path”要素)と文字列(“text”要素)を設定します。
円グラフの扇”path”要素の”d”属性を設定するための関数を、D3のメソッドd3.arcを使って設定します。
1 2 3 4 5 6 7 8 9 |
arc = d3.arc() .outerRadius(radius) .innerRadius(0); pieGroup.append("path") .attr("d", arc) .attr("fill", function(d) { return color(d.index) }) .attr("opacity", 0.75) .attr("stroke", "white"); |
d3.arcは.outerRadiusで外側の半径を.innerRadiusで内側の半径を設定します。.innerRadiusに0以外の値、例えば
1 2 3 |
arc = d3.arc() .outerRadius(radius) .innerRadius(130); |
とすると、ドーナツチャートを作成することができます。
6. pieチャートテキストSVG要素の設定
ラベル用のテキストを設定します。
1 2 3 4 5 6 7 8 9 10 11 |
var text = d3.arc() .outerRadius(radius - 30) .innerRadius(radius - 30); pieGroup.append("text") .attr("fill", "black") .attr("transform", function(d) { return "translate(" + text.centroid(d) + ")"; }) .attr("dy", "5px") .attr("font", "10px") .attr("text-anchor", "middle") .text(function(d) { return d.data.name; }); |
テキストの配置のためにd3.arcを再び呼び出してtextにメソッドを設定しています。.centroidメソッドにpieチャート用に変換したデータを挿入すると、パイチャートの半径方向の中央位置にテキストが設定できます。扇の.innerRadiusを0としたためテキストを中央より少し外側に設置したく、新たにメソッドを呼び出しています。先ほどのドーナツチャートの場合は中央位置にテキストを配置したほうが見栄えがよいので、テキスト配置のためにd3.arcを呼び出す必要はなく、text.centroid(d)の部分をarc.centroid(d)とすれば、先ほどのサンプルのように中央配置できます。
まとめ
棒グラフと同じデータ構造で円グラフを作成することができます。tooltipも棒グラフと同様にCSSで設定できます(詳細はこちら)。また、円グラフの応用としてサンバースト図があります。複数の階層構造をきれいに可視化できます。