HTML5テクニカルノート

D3.js入門 01: 棒グラフを描く

ID: FN1701004
Technique: HTML5 / JavaScript
Library: D3.js 4.4.0

D3.jsを使って配列の数値から棒グラフを描いてみましょう。D3.jsのインストールや基本的な構文については、「D3.jsを使う」をお読みください。

01 グラフの棒をひとつ描く

D3.jsのライブラリはCDNから読み込むことにして、<head>要素につぎのように<script>要素を定めましょう。また、<body>要素には、D3で操作する親の<div>要素(class属性"chart")をひとつ加えておきます。

<head>要素


<script src="https://d3js.org/d3.v4.min.js"></script>

<body>要素


<div class="chart"></div>

手始めとして、親要素に子要素を加えて、テキストも書き込んでみます。つぎのように、メソッドd3.select()でクラス(chart)が定められた親要素を選び、selection.append()で子要素(<div>)を加えます。要素にテキストを与えるのは、selection.text()メソッドです(前出「D3.jsを使う」参照)。ブラウザで確かめると、HTMLドキュメントには以下のようにテキスト("Hello, world!")が示されます。また、開発ツール(Chromeは[表示]>[開発/管理]>[デベロッパーツール])で調べると、親要素に子要素が動的に加わっています(図001)。

<script>要素


d3.select('.chart')
	.append('div')
	.text('Hello, world!');

Hello, world!

図001■開発ツールでHTMLドキュメントを調べると子要素が加わっている

動的に加えた子要素にスタイルを割り当てて、グラフの横棒のかたちにします。D3は描画のための独自の機能は持ち合わせていません。CSSやSVGなどのWeb標準の技術を使って、視覚表現をつくります。学習コストを下げ、最新の技術がすぐに採り入れられるように考えられた仕組みです。以下のコード001に書いたCSSの定めを<style>要素に加えます。そして、前掲のJavaScriptコードにselection.style()メソッドの呼び出しさえ加えれば、グラフの横棒がひとつできてしまうのです(図002)。

図002■描かれたグラフの横棒

コード001■グラフの横棒をひとつ描く

<style>要素


.chart div {
	font: 10px sans-serif;
	background-color: steelblue;
	text-align: right;
	padding: 3px;
	margin: 1px;
	color: white;
}

<body>要素


<div class="chart"></div>
<script>
d3.select('.chart')
	.append('div')
	.style('width', '200px')
	.text('Hello, world!');
</script>

02 HTMLのコードで棒グラフを描く

前掲コード001のCSSの定めがあれば、D3を使わなくても、簡単なグラフならHTMLの要素を手書きしてもつくれます。実際に棒グラフを描いてみたのが、つぎのコードです(図003)。


<div class="chart">
	<div style="width: 40px;">4</div>
	<div style="width: 80px;">8</div>
	<div style="width: 150px;">15</div>
	<div style="width: 160px;">16</div>
	<div style="width: 230px;">23</div>
	<div style="width: 420px;">42</div>
</div>

図003■描かれた横棒グラフ

03 D3で要素を動的に加える

D3を使うと、見た目は前掲のHTMLコードと変わらなくても、グラフがデータから動的につくれます。そこで、つぎのように親要素(class属性"chart")だけに戻し、データの数値は配列にして変数(data)に入れておきます。D3で書くスクリプトは後にコード002としてまとめたとおり、さして長いものではありません。けれど、ここは処理を順に確かめていきましょう。また、D3のメソッドは参照したもとのオブジェクトを返すので、メソッドの呼び出しは前掲コード001のようにドット(.)でつなげられます(前出「D3.jsを使う」参照)。けれど、ひとつひとつ説明するために、戻り値はそのつど変数に納めます。


<div class="chart"></div>
<script>
var data = [4, 8, 15, 16, 23, 42];
</script>

第1に、d3.select()メソッドの引数に渡したクラス(chart)から、親要素を選択します。ここに、棒グラフのノードをつくり込みます。


var chart = d3.select('.chart');

第2に、動的に加えるデータの選択(selectionオブジェクト)を、selection.selectAll()メソッドで初期化して加えます。データにもとづいて、新たな要素をつくったり、修正したり、除いたりといった操作は、この選択に対して行われることになるのです。


var bar = chart.selectAll('div');

第3に、選択にselection.data()メソッドでデータを与えます。このデータをもとに、新たな要素がつくられます。


var barUpdate = bar.data(data);

第4に、メソッドselection.enter()が初めの要素のための新しい選択をつくり、selection.append()でデータに応じた子要素が加えられます。


var barEnter = barUpdate.enter().append('div');

最後に、新しくつくられた子要素ごとに、設定を加えます。メソッドselection.style()とselection.text()で、それぞれの横棒の幅と示す値を定めました。


barEnter.style('width', function(d) {
	return d * 10 + 'px';
});
barEnter.text(function(d) {
	return d;
});

これらをまとたのが、つぎのコード002です。何をやっているかさえわかれば、コードはドット(.)でつなげて書く方が早いでしょう。

コード002■D3で横棒グラフを描く


<div class="chart"></div>
<script>
var data = [4, 8, 15, 16, 23, 42];
d3.select('.chart')
	.selectAll('div')
	.data(data)
	.enter().append('div')
	.style('width', function(d) {
		return d * 10 + 'px';
	})
	.text(function(d) {
		return d;
	});
</script>

04 グラフの表示を領域に合わせる

グラフの棒の長さは、最大値が決められた領域に収まるように調整します。値が変われば、調整係数も計算し直さなければなりません。d3.scaleLinear()メソッドは、その計算を代わってやってくれます^[*1]。つぎのように、データの範囲をcontinuous.domain()に、対象領域をcontinuous.range()にそれぞれ配列で渡すと、関数(x)が返されます。この関数にデータの値を与えれば、領域に収まる値に変えてくれるのです。なお、d3.max()メソッドは、渡された配列エレメントの最大値を返します。


var x = d3.scaleLinear()
	.domain([0, d3.max(data)])
	.range([0, width]);
d3.select('.chart')
	
	.style('width', function(d) {
		// return d * 10 + 'px';
		return x(d) + 'px';
	})

書き上がったスクリプトを、つぎのコード003にまとめました。データを変えていませんので、前掲コード002と見た目では違いはわからないでしょう。以下のサンプル001をjsdo.itに掲げましたので、[Fork]してデータの配列の数値を変えてみると確かめられます。

コード003■横棒グラフの長さが領域に合わせられる


var data = [4, 8, 15, 16, 23, 42];
var width = 420;
var x = d3.scaleLinear()
	.domain([0, d3.max(data)])
	.range([0, width]);
d3.select('.chart')
	.selectAll('div')
	.data(data)
	.enter().append('div')
	.style('width', function(d) {
		return x(d) + 'px';
	})
	.text(function(d) {
		return d;
	});

サンプル001■D3.js: Simple Bar Chart with CSS

[*1] D3 4.0より前は、d3.scale.linear()メソッドが用いられました。このメソッドは使えなくなりましたのでご注意ください。

作成者: 野中文雄
更新日: 2017年1月14日「D3.js入門」シリーズのリンクを追加。
作成日: 2017年1月9日