折れ線グラフを塗りつぶす

D3.jsでは両機内にを塗りつぶしたグラフを表示することができます。このとき、d3.svg.line()メソッドではなくて、d3.svg.area()メソッドを使います。
座標値を指定するx()､y0()､y1()()メソッドに関数を指定して、データに応じた値を返すようにすれば領域内を塗りつぶしたグラフを表示させることができます。

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

<!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;  fill:red;  }
	.blue { stroke: blue; fill:blue; }
	.green{ stroke: green;fill: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; fill:red; }

.blue { stroke: blue; fill:blue; }

.green{ stroke: green;fill:green;}

</style>

</head>

<body>

<h2>折れ線グラフの線を色々な形にする</h2>

</body>

</html>

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

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

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

	// 今回は３つのデータセットを用意
	var arrData = [ [ ] ];
	arrData[0] = [10,80,20,40,90,70,100,60,30,50];
	arrData[1] = [90,60,10,70,50,20,30,80,40,100];
	arrData[2] = [100,80,80,70,80,60,70,50,60,40];

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

	drawGraph( arrData[0], "red"  ,"linear"); // 折れ線グラフを表示
//	drawGraph( arrData[1], "blue" ,"step"  ); // 折れ線グラフを表示
//	drawGraph( arrData[2], "green","basis" ); // 折れ線グラフを表示

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

function drawGraph( arrData,cssClassName,type){

	var area =
		d3.svg.area()                    // svg領域
		.x(function(d,i){
			return offsetX + i * margin; // Ｘ座標は出現順番＊間隔
		})
		
		.y0(function(d,i){
			//データからＹ座標の分を引く
			return svgHeight - offsetY; 
		})
		.y1(function(d,i){
			//データからＹ座標の分を引く
			return svgHeight - ( d * scale ) - offsetY; 
		})
		.interpolate(type);

	var lineElements = 
		d3.select("#graph")
		.append("path")                    // データの数だけpath要素が追加される
		.attr("class","line " + cssClassName )   // CSSクラスを指定
		.attr("d",area( 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 + ")")

	/*
		scale = 2.00 の値を変えると表示倍率が変わりますが、
		縦の目盛り位置がずれてしまいます。今回は１００を基準にしているため、			倍率を変化させても目盛りが正しく表示させるには、
		下記のコメントアウトの箇所のように書きます。
	*/
	/*
		.attr("transform","translate(" + 
		offsetX + ", " + ((100-(scale-1)*100)  + offsetY ) + ")")
	*/
		.call(
				d3.svg.axis()
				.scale(yScale)       // スケールを摘要
				.orient("left")      // 目盛りの表示位置を左側
		);

	d3.select("#graph")
		.append("rect")
		.attr("class","axisX")
		.attr("width", svgWidth)
		.attr("height",1)
		.attr("transform","translate(" + 
		offsetX + ", " + (svgHeight - offsetY - 0.5) + ")");
}

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

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

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

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

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

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

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

var arrData = [ [ ] ];

arrData[0] = [10,80,20,40,90,70,100,60,30,50];

arrData[1] = [90,60,10,70,50,20,30,80,40,100];

arrData[2] = [100,80,80,70,80,60,70,50,60,40];

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

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

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

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

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

function drawGraph( arrData,cssClassName,type){

var area =

d3.svg.area() // svg領域

.x(function(d,i){

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

})

.y0(function(d,i){

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

return svgHeight - offsetY;

})

.y1(function(d,i){

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

return svgHeight - ( d * scale ) - offsetY;

})

.interpolate(type);

var lineElements =

d3.select("#graph")

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

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

.attr("d",area( 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 + ")")

scale = 2.00 の値を変えると表示倍率が変わりますが、

縦の目盛り位置がずれてしまいます。今回は１００を基準にしているため、倍率を変化させても目盛りが正しく表示させるには、

下記のコメントアウトの箇所のように書きます。

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

offsetX + ", " + ((100-(scale-1)*100) + offsetY ) + ")")

.call(

d3.svg.axis()

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

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

);

d3.select("#graph")

.append("rect")

.attr("class","axisX")

.attr("width", svgWidth)

.attr("height",1)

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

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

}