サイト制作に関するメモ書き

HOME > JavaScript > D3.jsを使ってみる

D3.jsを使ってみる

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

使い方

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

try-d3js01

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

<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の幅と高さを指定します。

d3.select(selector) 指定したselectorに一致する最初の要素を選択。
selection.append(selector) selectorをselection内部の最後に挿入する。
selection.attr(name[, value]) nameのみの場合、指定した属性の値を返す。
nameとvalue両方ある場合、指定した属性に指定した値を設定する。

 

目盛部分の作成

// 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()で実際に表示する値の調節を行っています。

d3.scale.linear() 入力する値と出力する値で長さを調整。
linear.domain([numbers]) 入力する値の範囲を設定。
linear.range([values]) 出力する値の範囲を設定。
d3.max(array[, accessor]) 指定した配列の最大値を返します。
linear.nice([count]) 入力する値の範囲をキリよく調整する?
d3.svg.axis() グラフの軸を作成。
axis.scale([scale]) scaleが指定されていない場合は、現在のスケールを返す。
scaleが指定されている場合は、スケールを設定し、軸を返す。
axis.orient([orientation]) orientationが指定されている場合は、方向を設定し、軸を返す。

 

目盛をグラフに追加

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

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

section.call(function[, arguments…]) sectionにfunctionを呼び出す。

 

棒グラフの追加

// グラフにデータを追加
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行目で棒グラフを追加しています。

selectAll(selector) 指定したセレクターに一致する要素を選択。
selection.data([values[, key]]) selectionとデータを関連付けする。
selection.enter() データに対してsectionが不足している場合に追加する。

 

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

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP