外部ファイルを読み込んで円グラフを表示させる

CSVデータを読み込んでグラフを表示させてみます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>各科目の点数を年度別に表示する</title>
	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:320px;
		height:320px;
		border:2px solid red;}

	.pie{
		fill:yellow;
		stroke:green}

	.total{ font-size:12px;text-anchor:middle;}

	.pieNum{font-size:16px;text-anchor:middle;}

	</style>

</head>
<body>
	<h2>年度別科目別の成績</h2>
	<svg id="graph"></svg>
	<form>
		<select id="year">
			<option value="2012">2012年</option>
			<option value="2013">2013年</option>
			<option value="2014">2014年</option>
		</select>
	</form>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>各科目の点数を年度別に表示する</title>

<style>

svg{

width:320px;

height:320px;

border:2px solid red;}

.pie{

fill:yellow;

stroke:green}

.total{ font-size:12px;text-anchor:middle;}

.pieNum{font-size:16px;text-anchor:middle;}

</style>

</head>

<body>

<h2>年度別科目別の成績</h2>

<form>

</select>

</form>

</body>

</html>

	/* 年度別の成績表を読み込むプログラム */
	drawPie("graphData2012.csv");

	d3.select("#year").on("change",function(){
		d3.select("#graph")
		.selectAll("*")
		.remove();          // svg内の要素を全て削除

		// 指定された年のデータを円グラフで表示
		drawPie("graphData" + this.value + ".csv",this.value); 
	});

function drawPie(fileName,year){

	d3.csv( fileName,function(error,data){

		var arrData = [];
		for( var i in data[0] ){
			arrData.push( data[0][i] );
		}
		console.log( arrData );

		var svgEle = document.getElementById("graph");

		var svgWidth  = window.getComputedStyle(svgEle,null)
						.getPropertyValue("width");
		var svgHeight = window.getComputedStyle(svgEle,null)
						.getPropertyValue("Height");
		svgWidth  = parseFloat( svgWidth  );
		svgHeight = parseFloat( svgHeight );

		var pie = d3.layout.pie();
		var arc = d3.svg.arc()
				.innerRadius(32).outerRadius(100);

		var pieElements = d3.select("#graph")
			.selectAll("g")
			.data( pie(arrData) )
			.enter()
			.append("g")
			.attr("transform","translate(" + 
			svgWidth / 2 + ", " + svgHeight / 2 + ")");

		pieElements
			.append("path")
			.attr("class","pie")
			.style("fill",function(d,i){
				return ["blue","green","yellow","gold","silver"][i];
			})
			.transition()
			.duration(400)
			.delay(function(d,i){
				return i * 400;
			})
			.ease("linear")
			.attrTween("d",function(d,i){
				var interpolate = d3.interpolate(
					{ startAngle : d.startAngle, endAngle : d.startAngle},
					{ startAngle : d.startAngle, endAngle : d.endAngle}
				);
				return function(t){
					return arc(interpolate(t));
				}
			});

		var textElements = d3.select("#graph")
			.append("text")
			.attr("class","total")
			.attr("transform","translate(" + 
			svgWidth / 2 + ", " + (svgHeight / 2 + 5 ) + ")")
			.text("科目別成績");

		pieElements
		.append("text")
		.attr("class","pieNum")
		.attr("transform",function(d,i){
			return "translate(" + arc.centroid(d) + ")";
		})
		.text(function(d,i){
			return d.value;
		});

	});
}

/* 年度別の成績表を読み込むプログラム */

drawPie("graphData2012.csv");

d3.select("#year").on("change",function(){

d3.select("#graph")

.selectAll("*")

.remove(); // svg内の要素を全て削除

// 指定された年のデータを円グラフで表示

drawPie("graphData" + this.value + ".csv",this.value);

});

function drawPie(fileName,year){

d3.csv( fileName,function(error,data){

var arrData = [];

for( var i in data[0] ){

arrData.push( data[0][i] );

}

console.log( arrData );

var svgEle = document.getElementById("graph");

var svgWidth = window.getComputedStyle(svgEle,null)

.getPropertyValue("width");

var svgHeight = window.getComputedStyle(svgEle,null)

.getPropertyValue("Height");

svgWidth = parseFloat( svgWidth );

svgHeight = parseFloat( svgHeight );

var pie = d3.layout.pie();

var arc = d3.svg.arc()

.innerRadius(32).outerRadius(100);

var pieElements = d3.select("#graph")

.selectAll("g")

.data( pie(arrData) )

.enter()

.append("g")

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

svgWidth / 2 + ", " + svgHeight / 2 + ")");

pieElements

.append("path")

.attr("class","pie")

.style("fill",function(d,i){

return ["blue","green","yellow","gold","silver"][i];

})

.transition()

.duration(400)

.delay(function(d,i){

return i * 400;

})

.ease("linear")

.attrTween("d",function(d,i){

var interpolate = d3.interpolate(

{ startAngle : d.startAngle, endAngle : d.startAngle},

{ startAngle : d.startAngle, endAngle : d.endAngle}

);

return function(t){

return arc(interpolate(t));

}

});

var textElements = d3.select("#graph")

.append("text")

.attr("class","total")

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

svgWidth / 2 + ", " + (svgHeight / 2 + 5 ) + ")")

.text("科目別成績");

pieElements

.append("text")

.attr("class","pieNum")

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

return "translate(" + arc.centroid(d) + ")";

})

.text(function(d,i){

return d.value;

});

}

Tokyo,Yokohama,Chiba,Nagoya,Osaka
10,9,8,7,6

1 2	Tokyo,Yokohama,Chiba,Nagoya,Osaka 10,9,8,7,6

Tokyo,Yokohama,Chiba,Nagoya,Osaka
20,17,14,12,10,8

1 2	Tokyo,Yokohama,Chiba,Nagoya,Osaka 20,17,14,12,10,8

Tokyo,Yokohama,Chiba,Nagoya,Osaka
37,32,24,22,18

1 2	Tokyo,Yokohama,Chiba,Nagoya,Osaka 37,32,24,22,18

CSVファイルを読み込んでグラフを表示する方法は、縦棒グラフを表示させた時と同じです。d3.csv()を利用して読み込んで、円グラフを表示します。データセットは縦棒グラフのときと違いラベルは使いません。なので下記のように変数arrDataにはじめの１行のデータを代入するだけです。

var arrData = [];
for( var i in data[0] ){
arrData.push( data[0][i] );
}

今回は複数のCSVファイルのデータを読み込むためCSVファイル読込円グラフを表示させるまでをdrawPieという関数にしています。この関数は読み込むCSVファイル名を渡します。サンプルコードのように「drawPie("graphData2012.csv");」と書けばgraphData2012.csvファイルを読み込んで円グラフを作成します。

今度はセレクトメニューの処理です。セレクトメニューにはID「year」と付けているので、
d3.select("#year")と書けばアクセスすることが可能です。このセレクトメニューが選択されたら(選択内容が変化したら)対応するCSVファイルを関数drawPieのパラメータとして渡します。選択された項目の値は、this.valueで取得できます。なので
drawPie("graphData" + this.value + ".csv",this.value); と書いています。

円グラフを表示する前に、svg要素内のtext要素やpath要素を全て削除します。これを忘れるとグラフの２回目以降表示するときに、以前のグラフが消えず重なて表示されてしまいます。svg要素内の全ての要素を指定するには以下のようにします。

d3.select("#graph").selectAll("*").remove();