折れ線グラフを作ってみる

2015年10月19日

棒グラフ、円グラフと同じくらいよく見るのが折れ線グラフです。体重や為替相場など継続的に変化するデータを把握する時に使われます。円グラフはD3.jsに用意されたレイアウト機能を利用しましたが、折れ線グラフの場合はレイアウト機能は用意されていません。

折れ線グラフを表示するには。D3.jsのレイアウト機能を利用するのではなく、SVGの連続線を利用します。この連続線という物をどの座標ん位表示するかをプログラミングします。

まずはサンプルコードを実行して説明した方が良いと思います。

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

<!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;}

	</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;}

</style>

</head>

<body>

<h2>折れ線グラフを表示するサンプル</h2>

</body>

</html>

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

	var svgWidth  = 320; // SVG要素の幅
	var svgHeight = 240; // SVG要素の高さ
	var arrData = [9,45,15,30,150,67,55,87,64,49];

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

	var line = 
		d3.svg.line()          // SVGのライン
		.x(function(d,i){
			return i * margin; // X座標は出現順番＊順番
		})
		.y(function(d,i){
			return svgHeight - d; // データからＹ座標の分を引く
		});

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

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

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

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

var arrData = [9,45,15,30,150,67,55,87,64,49];

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

var line =

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

.x(function(d,i){

return i * margin; // X座標は出現順番＊順番

})

.y(function(d,i){

return svgHeight - d; // データからＹ座標の分を引く

});

var lineElements =

d3.select("#graph")

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

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

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

折れ線グラフを表示するには。D3.jsのsvgオブジェクトに用意されているd3.svg.line()メソッドを使います。d3.svg.line()メソッドは２点間の座標を結ぶ処理を行います。表示する線はd3.svg.line()としただけではエラーで表示されません。d3.svg.line()メソッドにはx(),y()()メソッドと使って表示する座標値を指定する必要があります。

データセットのデータから座標を返すようにするには、x(),y()メソッドに関数を指定します。メソッドに関数を指定する方法は、今までの記事で紹介してきた方法と同じです。関数にはデータとデータの出現順番が渡されます。なお、折れ線グラフも縦棒グラフと同様に、svg要素の高さからデータの値を減算しないと上下が逆になって表示されます。