D3.jsで目盛りを表示してみる

今回はグラフに加えて目盛りを表示します。

目盛りのスタイルを決めて、設定する

目盛りや数値やラベル、線のスタイルを設定します。
コードを実際に書いて設定することもできますが、
分業しておいたほが後々、楽です。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>グラフに目盛りをつけてみる</title>

	<style>
	#sampleGraph{width:100%;}
	/*
		目盛りに適用するスタイルはここに書きます。
		別個CSSファイルを作成して読み込んでもＯＫ

		classについて
		.axis：目盛りに関するもの
		 text：目盛りの数値
		 pathとlineが目盛りの線
	*/
	.axis text{
		font-family:sans-serif;
		font-size:16px;}

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

	</style>
	<script src="../js/d3.js"></script>
</head>
<body>
	<h1>目盛りを表示する</h1>
	<svg id="sampleGraph">
	</svg>

	
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>グラフに目盛りをつけてみる</title>

<style>

#sampleGraph{width:100%;}

目盛りに適用するスタイルはここに書きます。

別個CSSファイルを作成して読み込んでもＯＫ

classについて

.axis：目盛りに関するもの

text：目盛りの数値

pathとlineが目盛りの線

.axis text{

font-family:sans-serif;

font-size:16px;}

.axis path,

.axis line{

fill:none;

stroke:black;

}

</style>

</head>

<body>

<h1>目盛りを表示する</h1>

</svg>

</body>

</html>

	var arrData = [];

	for(var i = 0 ; i < 5 ; i++){
		//0～299までの数値を５つ用意
		arrData[i] = Math.floor( Math.random() * 300 );
	}

	d3.select("#sampleGraph") //SVG要素を指定
	.selectAll("rect")        //SVGで四角形を示す要素を指定
	.data(arrData)            //データを設定
	.enter()                  //データの数に応じrect要素を生成
	.append("rect")           //SVGで四角形を生成
	.attr("x",10)             //棒グラフの表示位置を10px右にずらす
	.attr("y", function(d,i){
		return i * 25;        //棒グラフの表示位置を25pxずつずらす
	})
	.attr("height","20px")    //棒グラフ(1本あたり)の高さ
	.attr("width" , function(d,i){
		return d + "px";      //棒グラフの幅
	});

	//リニアスケールを設定
	var xScale = 
		d3.scale.linear()
		//元データ範囲
		.domain([0,300])
		//実際の出力サイズ
		.range([0,300]);

	//目盛りを設定して表示
	d3.select("#sampleGraph")

	/*
		目盛りを表示するには、SVG要素をグループ化する機能を使い
		目盛りの線と数値、ラベルを一纏めにして処理。
		グループ化することにより目盛りをまとめて移動させる
		ことができます、

		グループ化するにはSVGのg要素を使用
		g要素を使うことでg要素に内包される複数の要素を
		１つのグループとして扱うことができます。

		D3.jsでSVGのg要素を追加するにはappend("g")と書きます。
		棒グラフ作成時にrect要素を追加する時と同じです。
	*/
	.append("g")

	/*
		スタイルシート .axisをg要素に適用するために
		g要素のclass属性の値を指定
	*/
	.attr("class", "axis")

	/*
		目盛りは、x,y属性値を変更しても移動しません。
		目盛り位置を移動させるには、transform属性に移動量を
		指定しなければなりません。X方向10px,Y方向30px移動させる場合
		attr("transform","translate(10,30)")とかきます。

		translate()の引数は指定した数だけ、XY座標を移動させます。
		
	*/
	.attr("transform","translate(10," + (( 1 + arrData.length ) * 20 + 5 ) + ")")
	/*
		目盛りを表示するには、call()メソッドを使用
		call()メソッドは引数に、呼びたい関数を呼びだします、
		call()メソッドで指定した関数には処理対象となっている
		すべての要素が渡される。今回はg要素が１つだけ渡されています。
	*/
	.call( d3.svg.axis()     //callで目盛りを表示する関数を呼びだす
			.scale(xScale)   //スケールを適用
			.orient("bottom")//目盛りの表示位置を下側
		)

var arrData = [];

for(var i = 0 ; i < 5 ; i++){

//0～299までの数値を５つ用意

arrData[i] = Math.floor( Math.random() * 300 );

}

d3.select("#sampleGraph") //SVG要素を指定

.selectAll("rect") //SVGで四角形を示す要素を指定

.data(arrData) //データを設定

.enter() //データの数に応じrect要素を生成

.append("rect") //SVGで四角形を生成

.attr("x",10) //棒グラフの表示位置を10px右にずらす

.attr("y", function(d,i){

return i * 25; //棒グラフの表示位置を25pxずつずらす

})

.attr("height","20px") //棒グラフ(1本あたり)の高さ

.attr("width" , function(d,i){

return d + "px"; //棒グラフの幅

});

//リニアスケールを設定

var xScale =

d3.scale.linear()

//元データ範囲

.domain([0,300])

//実際の出力サイズ

.range([0,300]);

//目盛りを設定して表示

d3.select("#sampleGraph")

目盛りを表示するには、SVG要素をグループ化する機能を使い

目盛りの線と数値、ラベルを一纏めにして処理。

グループ化することにより目盛りをまとめて移動させる

ことができます、

グループ化するにはSVGのg要素を使用

g要素を使うことでg要素に内包される複数の要素を

１つのグループとして扱うことができます。

D3.jsでSVGのg要素を追加するにはappend("g")と書きます。

棒グラフ作成時にrect要素を追加する時と同じです。

.append("g")

スタイルシート .axisをg要素に適用するために

g要素のclass属性の値を指定

.attr("class", "axis")

目盛りは、x,y属性値を変更しても移動しません。

目盛り位置を移動させるには、transform属性に移動量を

指定しなければなりません。X方向10px,Y方向30px移動させる場合

attr("transform","translate(10,30)")とかきます。

translate()の引数は指定した数だけ、XY座標を移動させます。

.attr("transform","translate(10," + (( 1 + arrData.length ) * 20 + 5 ) + ")")

目盛りを表示するには、call()メソッドを使用

call()メソッドは引数に、呼びたい関数を呼びだします、

call()メソッドで指定した関数には処理対象となっている

すべての要素が渡される。今回はg要素が１つだけ渡されています。

.call( d3.svg.axis() //callで目盛りを表示する関数を呼びだす

.scale(xScale) //スケールを適用

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

)

目盛りを表示するには、いくつかの手順を踏まなければなりません。

１．使用する目盛りの種類を決めます。
直線や対数などがありますが、今回は直線的な目盛りです。
リニアスケール(一定間隔の直線的な目盛り)de,
d3.scale.linear()で生成できます。

２．スケール(縮尺)です。
データセットにあるデータの数値の範囲(元データの範囲)と
実際の表示範囲を調整します。
元データの範囲はdomain()メソッドで、
表示される範囲はrange()メソッドで設定します。
どちらのメソッドの引数は　[開始値,終了値]のような配列を指定します。

サンプルコードをではデータの値と表示する値が１：１なので、
domain(),range()は同値です。