サイト制作に関するメモ書き

HOME > JavaScript > D3.jsで円グラフを作成してみる

D3.jsで円グラフを作成してみる

D3.jsを使って円グラフを作成してみます。
大まかな使い方は前回の記事をご確認ください。

サンプルコード

HTML

<div id="sample"></div>

JavaScript

// グラフに表示するデータ
var dataArr = [110, 450, 870, 300, 630];
var colorArr = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e'];
// グラフ全体のサイズ
var svgWidth = 500;
var svgHeight = 500;

// グラフの枠作成
var svg = d3.select('#sample').append('svg').attr({
	width: svgWidth,
	height: svgHeight
});
// 円グラフを作成
var pie = d3.layout.pie().sort(null).value(function(d) {
	return d;
});

// 円グラフのサイズを指定
var arc = d3.svg.arc().innerRadius(50).outerRadius(svgWidth / 2);

// 円グラフを描画
svg.selectAll('path').data(pie(dataArr)).enter().append('path').style({
	fill: function(d, i) {
		return colorArr[i];
	}
}).attr({
	d: arc,
	transform: 'translate(' + svgWidth / 2 + ', ' + svgHeight / 2 + ')'
})

円グラフのデモページ

d3.layout.pie() 円グラフを作成する。
pie.sort() 円グラフのデータの並び替えの指定。
指定が無い場合はデータの大きい順に並び替え。nullの場合は並び替え無効。
pie.value([accessor]) データから使用する値を取得する方法を指定する。
d3.svg.arc() 円弧を作成する。
arc.innerRadius() 円グラフの内側の半径を指定する。
arc.outerRadius() 円グラフの外側の半径を指定する。
selection.style(name[, value]) nameのみの場合、指定したプロパティの値を返す。
nameとvalue両方ある場合、指定したプロパティの値を設定する。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP