データセットと日付を対応させてみる

前回の記事で、JSON形式のデータを扱ったデータには、折れ線グラフの数値だけではなく、年度のデータも含まれています。今回は横軸である下の目盛りにデータのの年数を表示します。

{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },

2006年～2015年の10年分のデータです。値と目盛りを体操させるにはdomain()メソッドとrange()メソッドを使います。縦の目盛りにすでに書いているものを、横の目盛りにするだけです。domain()メソッドに2006年と2015年の値を指定すれば完成です。ただ年数を表す文字列が重なると見にくいので、目盛りの間隔を広げます。目盛りの間隔はticks()メソッドで指定します。ticksメッソドの初期値は10です。今回はその半分であるticks(5)を指定します、

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>日付とデータセットを対応させる</title>
	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:400px;
		height:300px;
		border:2px solid red;}
	.line{fill:none; stroke:black;}

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

	.red  { stroke: red;}
	.blue { stroke: blue;}
	.green{ stroke: green;}
	</style>

</head>
<body>
	<h2>年度を表示する</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>日付とデータセットを対応させる</title>

<style>

svg{

width:400px;

height:300px;

border:2px solid red;}

.line{fill:none; stroke:black;}

.axis text{font-size:11px;}

.axis path,

.axis line{ fill:none; stroke:black;}

.axisX line{fill:none; stroke:black;}

.red { stroke: red;}

.blue { stroke: blue;}

.green{ stroke: green;}

</style>

</head>

<body>

<h2>年度を表示する</h2>

</body>

</html>

/*
	折れ線グラフを表示するサンプルコード
*/

	var svgWidth  = 320; // SVG要素の幅
	var svgHeight = 240; // SVG要素の高さ
	var offsetX = 30;    // 横方向のオフセット
	var offsetY = 20;    // 縦方向のオフセット

	var scale = 2.00;    // ２倍のサイズ

	// 今回は３つのデータセットを用意
	var arrData = [
		{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },
		{ year : 2007, value1 : 42, value2 : 67, value3 : 73 },
		{ year : 2008, value1 : 70, value2 : 55, value3 : 79 },
		{ year : 2009, value1 : 55, value2 : 45, value3 : 51 },
		{ year : 2010, value1 : 66, value2 : 36, value3 : 34 },
		{ year : 2011, value1 : 32, value2 : 51, value3 : 89 },
		{ year : 2012, value1 : 8 , value2 : 23, value3 : 9  },
		{ year : 2013, value1 : 20, value2 : 59, value3 : 26 },
		{ year : 2014, value1 : 29, value2 : 80, value3 : 37 },
		{ year : 2015, value1 : 60, value2 : 47, value3 : 54 }
	 ];

	var margin = svgWidth / (arrData.length - 1);// 折れ線グラフの間隔

	/*
		データセットして、要素番号を指定して配列データを渡す
	*/
	drawGraph( arrData,"value1", "red"  ,"linear"); // 折れ線グラフを表示
	drawGraph( arrData,"value2", "blue" ,"step"  ); // 折れ線グラフを表示
	drawGraph( arrData,"value3", "green","basis" ); // 折れ線グラフを表示
	drawScale(); 　　　　　　　　　　               // 目盛りを表示する

function drawGraph( arrData,itemName,cssClassName,type){

	var line = 
		d3.svg.line()                    // svgのライン
		.x(function(d,i){
			return offsetX + i * margin; // Ｘ座標は出現順番＊間隔
		})
		.y(function(d,i){
			//データからＹ座標の分を引く
			return svgHeight - ( d[ itemName ] * scale ) - offsetY;
		})
		.interpolate(type);             // 折れ線グラフの形状を設定

	var lineElements = 
		d3.select("#graph")
		.append("path")                   // データの数だけpath要素が追加される
		.attr("class","line " + cssClassName )   // CSSクラスを指定
		.attr("d",line( arrData ) );             // 連続線を指定
}

function drawScale(){

	// 目盛りを表示するためのスケールを設定
	var yScale = 
		d3.scale.linear()            // スケールの設定
		.domain([0,100])             // 元のサイズ
		.range([scale*100,0]);       // 実際の出力サイズ

	// 目盛りを表示する
	d3.select("#graph")
		.append("g")                 // g要素の追加。目盛りを表示する要素
		.attr("class","axis")        // CSSクラスを指定
		.attr("transform","translate(" + offsetX + ", " + offsetY + ")")
		.call(
			d3.svg.axis()
			.scale(yScale)       // スケールを摘要
			.orient("left")      // 目盛りの表示位置を左側
		);

	var xScale = 
		d3.scale.linear()
		.domain([2006, 2015])      // 2006-2015年のデータ
		.range([0, svgWidth]);     // 出力サイズ

	d3.select("#graph")
		.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + 
		offsetX + ", " + ( svgHeight - offsetY ) + ")")
		.call(
			d3.svg.axis()
			.scale(xScale)
			.orient("bottom")
			.ticks(5)              //2年に1度の表示をする
		);
}

折れ線グラフを表示するサンプルコード

var svgWidth = 320; // SVG要素の幅

var svgHeight = 240; // SVG要素の高さ

var offsetX = 30; // 横方向のオフセット

var offsetY = 20; // 縦方向のオフセット

var scale = 2.00; // ２倍のサイズ

// 今回は３つのデータセットを用意

var arrData = [

{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },

{ year : 2007, value1 : 42, value2 : 67, value3 : 73 },

{ year : 2008, value1 : 70, value2 : 55, value3 : 79 },

{ year : 2009, value1 : 55, value2 : 45, value3 : 51 },

{ year : 2010, value1 : 66, value2 : 36, value3 : 34 },

{ year : 2011, value1 : 32, value2 : 51, value3 : 89 },

{ year : 2012, value1 : 8 , value2 : 23, value3 : 9 },

{ year : 2013, value1 : 20, value2 : 59, value3 : 26 },

{ year : 2014, value1 : 29, value2 : 80, value3 : 37 },

{ year : 2015, value1 : 60, value2 : 47, value3 : 54 }

];

var margin = svgWidth / (arrData.length - 1);// 折れ線グラフの間隔

データセットして、要素番号を指定して配列データを渡す

drawGraph( arrData,"value1", "red" ,"linear"); // 折れ線グラフを表示

drawGraph( arrData,"value2", "blue" ,"step" ); // 折れ線グラフを表示

drawGraph( arrData,"value3", "green","basis" ); // 折れ線グラフを表示

drawScale(); 　　　　　　　　　　 // 目盛りを表示する

function drawGraph( arrData,itemName,cssClassName,type){

var line =

d3.svg.line() // svgのライン

.x(function(d,i){

return offsetX + i * margin; // Ｘ座標は出現順番＊間隔

})

.y(function(d,i){

//データからＹ座標の分を引く

return svgHeight - ( d[ itemName ] * scale ) - offsetY;

})

.interpolate(type); // 折れ線グラフの形状を設定

var lineElements =

d3.select("#graph")

.append("path") // データの数だけpath要素が追加される

.attr("class","line " + cssClassName ) // CSSクラスを指定

.attr("d",line( arrData ) ); // 連続線を指定

}

function drawScale(){

// 目盛りを表示するためのスケールを設定

var yScale =

d3.scale.linear() // スケールの設定

.domain([0,100]) // 元のサイズ

.range([scale*100,0]); // 実際の出力サイズ

// 目盛りを表示する

d3.select("#graph")

.append("g") // g要素の追加。目盛りを表示する要素

.attr("class","axis") // CSSクラスを指定

.attr("transform","translate(" + offsetX + ", " + offsetY + ")")

.call(

d3.svg.axis()

.scale(yScale) // スケールを摘要

.orient("left") // 目盛りの表示位置を左側

);

var xScale =

d3.scale.linear()

.domain([2006, 2015]) // 2006-2015年のデータ

.range([0, svgWidth]); // 出力サイズ

d3.select("#graph")

.append("g")

.attr("class","axis")

.attr("transform","translate(" +

offsetX + ", " + ( svgHeight - offsetY ) + ")")

.call(

d3.svg.axis()

.scale(xScale)

.orient("bottom")

.ticks(5) //2年に1度の表示をする

);

}

年数ラベルと「年月」表示にする

横軸に年数が表示されました、カンマが入ったりしています。今度は、年数に見えるように年と月を同時に表示します。月はデータ内には指定されていないので1月とします。
D3.jsには、日付を処理するためのスケールであるd3.time.scale()メソッドがあります。これは他のスケール処理と同様に日付を処理するための関数を返します。

目盛りに日付と年月のように整形して表示するにはtickFormatメソッドを使います。これに関数を指定すると、表示するときに必要なデータと出現順番が渡されます。

D3.jsにはformat()メソッドがあり、数値・日付変換を行う機能があります。今回は、日付に変換したいので、d3.time.formatメソッドを使います。このメソッドは、日付を指定された形式に変換するための関数を返します。これには、表示形式をどのうように整形、置換するかについて特別な「%」で始まる文字を用います。例を挙げると、d3.time.format("%Y年")と書けば、４桁の西暦年を返す関数が返されます。2005年の日付データなら「2005年」という文字列が返されます。

d3.time.format()メソッドで指定できる特別な文字

特別な文字	詳細
%a	週の名前
%A	完全な週の名前
%b	月の名前
%B	完全な月の名前
%c	日付と文字列
%d	月。１桁のときは、先頭に０がつく。
%e	月。１桁のときは、先頭に空白が入る。
%H	時間。２４時間
%I	時間。１２時間
%j	日にち(000-366)
%m	月
%M	分
%L	ミリ秒
%p	午前中か午後かを示す。AMかPM
%S	秒
%U	週の番号。日曜始まり(00-53)
%w	曜日を示す。(00-6)
%W	週の番号。月曜始まり(00-53)
%x	日付を示す。%m%d%Yと同じ
%X	時間を示す。%H:%M:%Sと同じ
%y	年数(00-99)
%Z	時間帯・タイムゾーン
%%	%の文字

年月を返したいなら下記のように書く。
渡されたデータをyyyy年mm月形式にする。

.tickFormat(function(d,i){
var getYearMonth = d3.time.format("%Y年%m月");
return getYearMonth(d);
})

それと年月を表示するうえやらなければいけないことがあります。domain()メソッドです。目盛りの範囲を指定するときに、下記のように数値ではなく日付を示すオブジェクトを指定します。たとえば、2006年～2015年までの場合は下記の通りです。

.domain( [new Date("2006/1/1"), new Date("2015/1/1") ] )

サンプルコードの実行結果はこちら

●HTMLファイルは記事の上部と同じもので大丈夫です。

/*
	折れ線グラフを表示するサンプルコード
*/

	var svgWidth  = 320; // SVG要素の幅
	var svgHeight = 240; // SVG要素の高さ
	var offsetX = 30;    // 横方向のオフセット
	var offsetY = 20;    // 縦方向のオフセット

	var scale = 2.00;    // ２倍のサイズ

	// 今回は３つのデータセットを用意
	var arrData = [
		{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },
		{ year : 2007, value1 : 42, value2 : 67, value3 : 73 },
		{ year : 2008, value1 : 70, value2 : 55, value3 : 79 },
		{ year : 2009, value1 : 55, value2 : 45, value3 : 51 },
		{ year : 2010, value1 : 66, value2 : 36, value3 : 34 },
		{ year : 2011, value1 : 32, value2 : 51, value3 : 89 },
		{ year : 2012, value1 : 8 , value2 : 23, value3 : 9  },
		{ year : 2013, value1 : 20, value2 : 59, value3 : 26 },
		{ year : 2014, value1 : 29, value2 : 80, value3 : 37 },
		{ year : 2015, value1 : 60, value2 : 47, value3 : 54 }
	 ];

	var margin = svgWidth / (arrData.length - 1);// 折れ線グラフの間隔

	/*
		データセットして、要素番号を指定して配列データを渡す
	*/
	drawGraph( arrData,"value1", "red"  ,"linear"); // 折れ線グラフを表示
	drawGraph( arrData,"value2", "blue" ,"step"  ); // 折れ線グラフを表示
	drawGraph( arrData,"value3", "green","basis" ); // 折れ線グラフを表示
	drawScale(); 　　　　　　　　　　               // 目盛りを表示する

function drawGraph( arrData,itemName,cssClassName,type){

	var line = 
		d3.svg.line()                    // svgのライン
		.x(function(d,i){
			return offsetX + i * margin; // Ｘ座標は出現順番＊間隔
		})
		.y(function(d,i){
			//データからＹ座標の分を引く
			return svgHeight - ( d[ itemName ] * scale ) - offsetY;
		})
		.interpolate(type);             // 折れ線グラフの形状を設定

	var lineElements = 
		d3.select("#graph")
		.append("path")                   // データの数だけpath要素が追加される
		.attr("class","line " + cssClassName )   // CSSクラスを指定
		.attr("d",line( arrData ) );             // 連続線を指定
}

function drawScale(){

	// 目盛りを表示するためのスケールを設定
	var yScale = 
		d3.scale.linear()            // スケールの設定
		.domain([0,100])             // 元のサイズ
		.range([scale*100,0]);       // 実際の出力サイズ

	// 目盛りを表示する
	d3.select("#graph")
		.append("g")                 // g要素の追加。目盛りを表示する要素
		.attr("class","axis")        // CSSクラスを指定
		.attr("transform","translate(" + offsetX + ", " + offsetY + ")")
		.call(
			d3.svg.axis()
			.scale(yScale)       // スケールを摘要
			.orient("left")      // 目盛りの表示位置を左側
		);

	// 横目盛りを表示するための設定
	var xScale = 
		d3.time.scale()

		// 2006-2015年のデータ
		.domain( [new Date("2006/1/1"), new Date("2015/1/1") ] )
		.range([0, svgWidth]);     // 出力サイズ

	d3.select("#graph")
		.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + 
			offsetX + ", " + ( svgHeight - offsetY ) + ")")
		.call(
			d3.svg.axis()
			.scale(xScale)
			.orient("bottom")
			.ticks(5)                       // 2年に1度の表示をする
			
			.tickFormat(function(d,i){

				var getYearMonth = 
				d3.time.format("%Y年%m月"); // 変換変数
				return getYearMonth(d);     // 変換した結果を返す
			})
			/*
				数値としてフォーマットしたいときは、d3.formatを使います。
				f0と書くと小数点な以下が非表示になります。			
			.tickFormat( d3.format("0f") )
			*/
		)
		/*
			// 目盛りの文字を90度回転させたいときは
			// ここのコメントを消すこと

		.selectAll("text")             // 目盛りの文字を対象処理にする
		.attr("transform","rotate(90)")// 90度回転
		.attr("dx", "0.7em")           // 位置調整
		.attr("dy","-0.4em")           // 位置調整
		.style("text-anchor","start"); // 表示位置指定
		*/
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

折れ線グラフを表示するサンプルコード

var svgWidth = 320; // SVG要素の幅

var svgHeight = 240; // SVG要素の高さ

var offsetX = 30; // 横方向のオフセット

var offsetY = 20; // 縦方向のオフセット

var scale = 2.00; // ２倍のサイズ

// 今回は３つのデータセットを用意

var arrData = [

{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },

{ year : 2007, value1 : 42, value2 : 67, value3 : 73 },

{ year : 2008, value1 : 70, value2 : 55, value3 : 79 },

{ year : 2009, value1 : 55, value2 : 45, value3 : 51 },

{ year : 2010, value1 : 66, value2 : 36, value3 : 34 },

{ year : 2011, value1 : 32, value2 : 51, value3 : 89 },

{ year : 2012, value1 : 8 , value2 : 23, value3 : 9 },

{ year : 2013, value1 : 20, value2 : 59, value3 : 26 },

{ year : 2014, value1 : 29, value2 : 80, value3 : 37 },

{ year : 2015, value1 : 60, value2 : 47, value3 : 54 }

];

var margin = svgWidth / (arrData.length - 1);// 折れ線グラフの間隔

データセットして、要素番号を指定して配列データを渡す

drawGraph( arrData,"value1", "red" ,"linear"); // 折れ線グラフを表示

drawGraph( arrData,"value2", "blue" ,"step" ); // 折れ線グラフを表示

drawGraph( arrData,"value3", "green","basis" ); // 折れ線グラフを表示

drawScale(); 　　　　　　　　　　 // 目盛りを表示する

function drawGraph( arrData,itemName,cssClassName,type){

var line =

d3.svg.line() // svgのライン

.x(function(d,i){

return offsetX + i * margin; // Ｘ座標は出現順番＊間隔

})

.y(function(d,i){

//データからＹ座標の分を引く

return svgHeight - ( d[ itemName ] * scale ) - offsetY;

})

.interpolate(type); // 折れ線グラフの形状を設定

var lineElements =

d3.select("#graph")

.append("path") // データの数だけpath要素が追加される

.attr("class","line " + cssClassName ) // CSSクラスを指定

.attr("d",line( arrData ) ); // 連続線を指定

}

function drawScale(){

// 目盛りを表示するためのスケールを設定

var yScale =

d3.scale.linear() // スケールの設定

.domain([0,100]) // 元のサイズ

.range([scale*100,0]); // 実際の出力サイズ

// 目盛りを表示する

d3.select("#graph")

.append("g") // g要素の追加。目盛りを表示する要素

.attr("class","axis") // CSSクラスを指定

.attr("transform","translate(" + offsetX + ", " + offsetY + ")")

.call(

d3.svg.axis()

.scale(yScale) // スケールを摘要

.orient("left") // 目盛りの表示位置を左側

);

// 横目盛りを表示するための設定

var xScale =

d3.time.scale()

// 2006-2015年のデータ

.domain( [new Date("2006/1/1"), new Date("2015/1/1") ] )

.range([0, svgWidth]); // 出力サイズ

d3.select("#graph")

.append("g")

.attr("class","axis")

.attr("transform","translate(" +

offsetX + ", " + ( svgHeight - offsetY ) + ")")

.call(

d3.svg.axis()

.scale(xScale)

.orient("bottom")

.ticks(5) // 2年に1度の表示をする

.tickFormat(function(d,i){

var getYearMonth =

d3.time.format("%Y年%m月"); // 変換変数

return getYearMonth(d); // 変換した結果を返す

})

数値としてフォーマットしたいときは、d3.formatを使います。

f0と書くと小数点な以下が非表示になります。

.tickFormat( d3.format("0f") )

)

// 目盛りの文字を90度回転させたいときは

// ここのコメントを消すこと

.selectAll("text") // 目盛りの文字を対象処理にする

.attr("transform","rotate(90)")// 90度回転

.attr("dx", "0.7em") // 位置調整

.attr("dy","-0.4em") // 位置調整

.style("text-anchor","start"); // 表示位置指定

}

年数ラベルを90度回転させて縦に表示する

年月は表示されてますが、横幅が狭く、すべての年月を表示できません。
なので、年月の文字を90度回転させて縦に表示します。縦書きするためのスタイルを書くのではなく、プログラム側で回転させます。

横軸に表示されている目盛りの文字は、text要素を使って表示しているので、横軸を表示する際のselectAll("text")としてtext要素を選択して、transform属性にrotate(90)をしていさせて、目盛りの文字を90度回転させています。
サンプルコードのコメントアウトを消して実行すると確認できます。