d3.js（v5） で面グラフ表示（Area Chart）する方法について記載します。
実装すると、次のような円グラフが表示できます。
目次
１．全体のコード
|
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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE html> <html> <head> <title>d3 area chart</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/d3.min.js"></script> <style type="text/css"> .bar { fill: steelblue; } .axis text { font: 10px sans-serif; color: #333; } #chart{ width:500px; height:500px; } </style> </head> <body> <svg id="chart"></svg> <script> var data = [ {date: "2019-01-01", value: 53.3}, {date: "2019-01-02", value: 55.2}, {date: "2019-01-03", value: 58.1}, {date: "2019-01-04", value: 59.5}, {date: "2019-01-05", value: 59.8}, {date: "2019-01-06", value: 59.7}, {date: "2019-01-07", value: 60.3}, {date: "2019-01-08", value: 60.4}, {date: "2019-01-09", value: 60.1}, {date: "2019-01-10", value: 73.2}, {date: "2019-01-11", value: 75.0}, {date: "2019-01-12", value: 76.5}, {date: "2019-01-13", value: 78.2}, {date: "2019-01-14", value: 81.1}, {date: "2019-01-15", value: 89.6}, {date: "2019-01-16", value: 91.2}, {date: "2019-01-17", value: 98.3}, {date: "2019-01-18", value: 85.4}, {date: "2019-01-19", value: 80.02}, {date: "2019-01-20", value: 92.8} ]; var margin = ({top: 20, right: 20, bottom: 30, left: 30}) var width = 500; var height = 500 const svg = d3.select("#chart"); // X軸の設定（日付の最小・最大値、描画範囲） var x = d3.scaleUtc() .domain(d3.extent(data, function(d){ return new Date(d.date) })) .range([margin.left, width - margin.right]); // Y軸の設定（描画データの最小・最大値、描画範囲） var y = d3.scaleLinear() .domain([0, d3.max(data, function(d){ return d.value })]).nice() .range([height - margin.bottom, margin.top]); // X軸を追加 var xAxis = d3.axisBottom(x).ticks(width / 80, "%m/%d"); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) // Y軸を追加 var yAxis = d3.axisLeft(y); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) // chart描画エリア var area = d3.area() .x(function(d){ return x(new Date(d.date))} ) .y1(function(d){ return y(d.value)} ) .y0(y(0)); // pathの設定（各データを描画） svg.append("path") .datum(data) .attr("fill", "steelblue") .attr("d", area); </script> </body> </html> |
２．コードの詳細（ HTML ）
グラフを表示する場所を定義します。
|
1 |
<svg id="chart"></svg> |
３．コードの詳細（ JavaScript ）
３−１．X軸の設定（日付の最小・最大値、描画範囲）
X軸に年月を使用するため、d3.scaleUtc() を使用しています。
年月日や時間などの、タイムスケールを使用する場合は、d3.scaleTime() を使用しても大丈夫なのですが、今回 X軸に使用するデータは年月日（2019-01-01）までのデータのため、d3.scaleTime() を 使用すると、2019-01-01 は、2019-01-01 09:00:00 と UTC+9 で扱われ、x軸の開始点 01/01 のラベルが表示されなくなります。
d3.scaleUtc() を使用すると、年月日だけのデータでも 2019-01-01 00:00:00 と扱ってくれるため、Demoのように、 01/01 のラベルが表示されます。
domainで、X軸の最小、最大値 を設定し、range で描画範囲を設定します。
|
1 2 3 |
var x = d3.scaleUtc() .domain(d3.extent(data, function(d){ return new Date(d.date) })) .range([margin.left, width - margin.right]); |
３−２．Y軸の設定（日付の最小・最大値、描画範囲）
X軸の設定と同様に、domainで、Y軸の最小・最大値を設定し、 range で描画範囲を設定します。
|
1 2 3 |
var y = d3.scaleLinear() .domain([0, d3.max(data, function(d){ return d.value })]).nice() .range([height - margin.bottom, margin.top]); |
３−３．X軸の描画
描画対象のsvgに、X軸を描画します。
d3.axisBottom の “%m/%d” で、年月日の表示形式を指定します。
今回は、月/日 の形式で表示するようにしています。
|
1 2 3 4 |
var xAxis = d3.axisBottom(x).ticks(width / 80, "%m/%d"); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) |
３−４．Y軸の描画
描画対象のsvgに、Y軸を描画します。
|
1 2 3 4 |
var yAxis = d3.axisLeft(y); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) |
３−５．面グラフの描画
面グラフを描画するには、描画エリアの定義に、d3.area() を使用します。
|
1 2 3 4 5 6 7 8 9 10 11 |
// chart描画エリア var area = d3.area() .x(function(d){ return x(new Date(d.date))} ) .y1(function(d){ return y(d.value)} ) .y0(y(0)); // pathの設定（各データを描画） svg.append("path") .datum(data) .attr("fill", "steelblue") .attr("d", area); |
４．まとめ
d3.jsを使用して面グラフを作成しました。
X、Y軸のデータを流し込めば、簡単に描画することができます。