円グラフに数値とテキストを加えてみる

円グラフの中央にテキストを表示する

円グラフの中に文字を表示してみます。円グラフ中央に合計値を表示します。D3.jsでは便利な機能があります。配列内の合計値を取得するには、d3.sum()メソッドを使います。パラメーターに配列を指定すると合計値を返却します。

円グラフの中央に文字を表示するにはappend("text")としてtext要素を追加します。今回は、データセットに応じて要素を追加はしないので、enter(),data()メソッドはいらないです。

各扇の部分の値も表示する

合計値の表示方法が分かったので、次は各扇の部分の値も表示したいです。推知のスタイルは合計値と同じようにHTMLファイル内で設定します。こちらも
D3.jsには便利な機能が用意されています。結論を先に言うと、centroid()メソッドを使います。このメソッドは図形の座標値から中心(重心)を計算します。扇の型のとき。その中心座標を求めることができます。centroid()メソッドは複雑な図形にも対応していますので、円グラフ以外にも利用することができます。

.attr("transform", function(d,i){
return "translate("+ arc.centroid(d) + ")";
})

centroid()メソッドはパラメーターには、データのそのものではなく円グラフ・扇形に関する情報とデータを持ったオブジェクトを渡さなければなりません。ただ。、オブジェクトに格納する情報は自分で用意する必要はなく、扇形のSVG要素のg要素を使ってグループ化するだけでD3.js側が勝手に計算します。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　円グラフに数値とテキストを追記</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:10px;text-anchor:middle;}

	</style>

</head>
<body>
	<h2>円グラフに数値とテキストを追記</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.js　円グラフに数値とテキストを追記</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:10px;text-anchor:middle;}

</style>

</head>

<body>

<h2>円グラフに数値とテキストを追記</h2>

</body>

</html>

	var svgWidth  = 320;       // SVG要素の幅を設定
	var svgHeight = 320;       // SVG要素の高さを設定
	var arrData =[50,25,12,6,3,2];
	var color = d3.scale.category20();

	var pie = d3.layout.pie()                 // 円グラフレイアウト
			.value(function(d,i){ return d;});// データセットのデータを返す

	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")            // データの数だけpath要素を追加
	.attr("class","pie")       // CSSクラスを指定
	.style("fill",function(d,i){
		//配列内の色を返却
		return color(i);       //標準10色の中から色を返す
	})
	.transition()
	.duration(600)
	.delay(function(d,i){      // 描画して表示する円グラフをずらす
		return i * 600;
	})
	.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")                        // text要素を追加
	.attr("class", "total")                // CSSクラスを追加
	.attr("transform","translate(" + svgWidth / 2 + ", " + 
	( svgHeight / 2 + 5 ) +")")            // 中心に表示
	.text("合計：" + d3.sum(arrData) );    // 合計値を表示する

	pieElements  // 数値を円弧の中に表示する
	.append("text")
	.attr("class","pieNum")
	.attr("transform", function(d,i){
		return "translate(" + arc.centroid(d) + ")";
	})
	.transition()
	.delay(function(d,i){      // 描画して表示する円グラフをずらす
		return 600 + i * 600;
	})
	.text(function(d,i){
		return d.value;
	});

var svgWidth = 320; // SVG要素の幅を設定

var svgHeight = 320; // SVG要素の高さを設定

var arrData =[50,25,12,6,3,2];

var color = d3.scale.category20();

var pie = d3.layout.pie() // 円グラフレイアウト

.value(function(d,i){ return d;});// データセットのデータを返す

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") // データの数だけpath要素を追加

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

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

//配列内の色を返却

return color(i); //標準10色の中から色を返す

})

.transition()

.duration(600)

.delay(function(d,i){ // 描画して表示する円グラフをずらす

return i * 600;

})

.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") // text要素を追加

.attr("class", "total") // CSSクラスを追加

.attr("transform","translate(" + svgWidth / 2 + ", " +

( svgHeight / 2 + 5 ) +")") // 中心に表示

.text("合計：" + d3.sum(arrData) ); // 合計値を表示する

pieElements // 数値を円弧の中に表示する

.append("text")

.attr("class","pieNum")

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

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

})

.transition()

.delay(function(d,i){ // 描画して表示する円グラフをずらす

return 600 + i * 600;

})

.text(function(d,i){

return d.value;

});