D3.jsを使ってみる

D3.jsの勉強として棒グラフを作ってみたのでメモ。

使い方

公式サイトからダウンロードします。

ダウンロードしてきたファイルを読み込ませれば準備完了です。

<script src="./d3.min.js"></script>

もしくは、CDNから読み込むこともできます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

対応ブラウザはこちらに記述がありますが、IE9から対応になります。
　

サンプルコード

HTML

#sample内に棒グラフを追加します。

<div id="sample"></div>

CSS

グラフの目盛部分のスタイルです。

.axis path, .axis line {
	fill: none;
	stroke: black;
}
.axis text {
	font-size: 10px;
}

JavaScript

// グラフに表示するデータ
var dataArr = [110, 450, 870, 300, 630];
var colorArr = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e'];
// グラフの縦幅
var graphHeight = 20;
// 棒グラフ間の間隔
var graphSpace = 10;
// グラフ全体のサイズ
var svgWidth = 500;
var svgHeight = (dataArr.length + 1) * (graphHeight + graphSpace);
// グラフ全体の左右の余白
var space = 10;

// グラフの枠作成
var svg = d3.select('#sample').append('svg').attr({
	width: svgWidth,
	height: svgHeight
});
// X軸の作成
var xScale = d3.scale.linear().domain([0, d3.max(dataArr)]).range([space, svgWidth - space]).nice();
// X軸のデータ作成
var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
// X軸をグラフに追加
svg.append('g').attr({
	class: 'axis',
	transform: 'translate(0, ' + dataArr.length * (graphHeight + graphSpace) + ')'
}).call(xAxis);
// グラフにデータを追加
svg.selectAll('rect').data(dataArr).enter().append('rect').attr({
	x: space,
	y: function(d, i) {
		return i * (graphHeight + graphSpace)
	},
	width: function(d) {
		return xScale(d) - space;
	},
	height: graphHeight,
	fill: function(d, i) {
		return colorArr[i];
	}
});

棒グラフのデモページ
　

JavaScriptの説明

グラフの各値を設定

// グラフに表示するデータ
var dataArr = [110, 450, 870, 300, 630];
var colorArr = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e'];
// グラフの縦幅
var graphHeight = 20;
// 棒グラフ間の間隔
var graphSpace = 10;
// グラフ全体のサイズ
var svgWidth = 500;
var svgHeight = (dataArr.length + 1) * (graphHeight + graphSpace);
// グラフ全体の左右の余白
var space = 10;

1～11行目でグラフに関する値を設定しています。
　

グラフの枠作成

// グラフの枠作成
var svg = d3.select('#sample').append('svg').attr({
	width: svgWidth,
	height: svgHeight
});

13～17行目でグラフで使用するSVGを作成しています。
d3.select()でグラフを挿入する#sampleを選択して、append()でSVGを追加、attr()でSVGの幅と高さを指定します。

目盛部分の作成

// X軸の作成
var xScale = d3.scale.linear().domain([0, d3.max(dataArr)]).range([space, svgWidth - space]).nice();
// X軸のデータ作成
var xAxis = d3.svg.axis().scale(xScale).orient('bottom');

18～21行目では、グラフに入力する値に応じて目盛部分を作成します。
domain()で入力する範囲(0～グラフの最大値)を設定、range()では出力する範囲(グラフ全体の幅から余白を引いた範囲)を設定して、それらの値からlinear()とnice()で実際に表示する値の調節を行っています。

目盛をグラフに追加

// X軸をグラフに追加
svg.append('g').attr({
	class: 'axis',
	transform: 'translate(0, ' + dataArr.length * (graphHeight + graphSpace) + ')'
}).call(xAxis);

22～26行目で作成した目盛をグラフに追加します。

棒グラフの追加

// グラフにデータを追加
svg.selectAll('rect').data(dataArr).enter().append('rect').attr({
	x: space,
	y: function(d, i) {
		return i * (graphHeight + graphSpace)
	},
	width: function(d) {
		return xScale(d) - space;
	},
	height: graphHeight,
	fill: function(d, i) {
		return colorArr[i];
	}
});

27～38行目で棒グラフを追加しています。

他にも色々なグラフが作成できますので、詳しくは公式のサンプルをご確認ください。
　

【参考サイト】

• D3.js入門 (全17回) – プログラミングならドットインストール
• API Reference · mbostock/d3 Wiki · GitHub