円グラフの色分けしてみる

2015年10月18日

円グラフは、それぞれの扇の部分が色分けされているのが普通です。扇形部分を色分けするにはstyle()メソッドを使い、塗の色を指定します。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}
	</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}

</style>

</head>

<body>

<h2>円グラフの色を分けて表示する</h2>

</body>

</html>

	var svgWidth  = 320;       // SVG要素の幅を設定
	var svgHeight = 320;       // SVG要素の高さを設定
	var arrData =[50,25,12,6,3,2];

	/*
		D3.jsが用意した標準10色を指定
		色を指定するのが面倒な時に使えます。

		d3.scale.category10() or
		d3.scale.category20()
		関数を返します。color(2)と指定しすると、
		パラメーターに応じて色が返されます。
	*/

	/* 
		下記の変数colorを使うとき、
		42行目のコメントアウトして
		43行目のコメントアウトを消す
	*/
	var color = d3.scale.category20();



	var pie = d3.layout.pie(); // 円グラフレイアウト
	var arc = d3.svg.arc()
			.innerRadius(0)    // 円グラフの内径
			.outerRadius(100); // 円グラフの外径
	var pieElements = 
		d3.select("#graph")
		.selectAll("path")     // path要素を指定
		.data( pie(arrData) ); // データを要素に連結
	pieElements.enter()        // データの数だけ繰り返し
	.append("path")            // データの数だけpath要素を追加
	.attr("class","pie")       // CSSクラスを指定
	.attr("d", arc)            // 扇形を指定
	.attr("transform","translate(" + 
	svgWidth / 2 + ", " + svgHeight / 2 + ")")  //円グラフを中心に配置

	.style("fill",function(d,i){
		
		//配列内の色を返却
		return ["blue","yellow","green","red","pink","#d4c8e0"][i]; 
		//return color(i); //標準10色の中から色を返す
	})

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

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

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

D3.jsが用意した標準10色を指定

色を指定するのが面倒な時に使えます。

d3.scale.category10() or

d3.scale.category20()

関数を返します。color(2)と指定しすると、

パラメーターに応じて色が返されます。

下記の変数colorを使うとき、

42行目のコメントアウトして

43行目のコメントアウトを消す

var color = d3.scale.category20();

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

var arc = d3.svg.arc()

.innerRadius(0) // 円グラフの内径

.outerRadius(100); // 円グラフの外径

var pieElements =

d3.select("#graph")

.selectAll("path") // path要素を指定

.data( pie(arrData) ); // データを要素に連結

pieElements.enter() // データの数だけ繰り返し

.append("path") // データの数だけpath要素を追加

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

.attr("d", arc) // 扇形を指定

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

svgWidth / 2 + ", " + svgHeight / 2 + ")") //円グラフを中心に配置

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

//配列内の色を返却

return ["blue","yellow","green","red","pink","#d4c8e0"][i];

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

})