Pie Chart Button

ボタンをクリックすると円グラフになります。

<!DOCTYPE html>
<meta charset="utf-8" />
<style>
html, body {
	margin: 0px;
	padding: 0px;
}
svg {
	border: 1px solid;
	background-color: #1a2126;
	width:960px;
	height: 500px;
}

.btn:hover {
	fill:#3dcc28;
}
</style>
<body>
<svg>
<defs>
	<filter id = "light">
		<feGaussianBlur  in="SourceAlpha"  stdDeviation="8" result="blur"/>
		<feSpecularLighting  in="blur" result = "specOut" specularConstant = "1.2" specularExponent="12" lighting-color="#bbbbbb">
			<feDistantLight azimuth="45" elevation ="45"/>
		</feSpecularLighting>
		<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
	</filter>
</defs>

</svg>

var  w = 960; //ステージの横幅
	var  pieChartSize = 100;	//チャートのサイズ
	var pieChartWidth = 10;	//チャートの太さ
	var margin = 10	//チャート間のマージン
	var  radius = (pieChartSize-(margin*2))/2;	//チャートの半径
	var  btnSize = radius;	//ボタンのサイズ
	
	//データセットをランダムに作成
	var data = d3.range(45).map(function() {
		return d3.range(Math.floor(2+Math.random() * 5)).map(function(){
			return Math.floor(1+Math.random() * 10);
		}).sort(d3.descending)
	});
	
	//pieChartのセルカラー			
	var color = ['#28cc57', '#89f093', '#19d02c', '#3d9f47', '#1af430', '#f31b1b', '#8828cc'];
	
	//アークパスジェネレーター
	var arc = d3.svg.arc()
		.outerRadius(radius)
		.innerRadius(radius - pieChartWidth);
	
	//pieChartレイアウト
	var pie = d3.layout.pie();
	
	var svg = d3.select('svg')
		.attr('width', 960)
		.attr('height', 500)
		.append('g')
		.attr('filter',"url(#light)")

//pieChartを表示するグループ要素
	var pieChart = svg.selectAll('g.pie')
		.data(data)
		.enter()
		.append('g')
		.datum(function(d){  return d })
		.attr('class', function(d, i ){ return 'pie chart'+i})
		.attr('transform', function(d, i){
			//横幅いっぱいまで描画したら次の行へ移動
			var y = (pieChartSize) * Math.floor(i/9) + radius + margin;
			var x = (i%9) * (pieChartSize+margin) + radius;		
			return 'translate('+ [x, y] + ')';
		});
		
	//装飾用のベースcircle
	pieChart.append('circle').attr({
		'r': radius,
		'fill': '#aeb2b4'
	});
	pieChart.append('circle').attr({
		'r': radius - pieChartWidth,
		'fill': '#1a2126'
	});
	
	//ボタン	
	var btn = pieChart.append('circle').attr({
			'class': 'btn',
			'r': btnSize,
			'fill': '#aeb2b4'
		})
		.on('click', drawArcs)
		
	
	//ボタンがクリックされたらpiechartを描画する	
	function drawArcs(d, i){
		//ボタンアニメーション
		d3.select(this).transition().duration(500).attr({
			'r': btnSize/2,
			'fill': '#3dcc28'
		}).call(endall, function(){
			d3.selectAll('g.arc').remove();
			//pieChartをアニメーションしつつ描く
			d3.select('.chart'+i).selectAll('g.arc')
				.data(function(d){ return pie(d); })
				.enter()
				.append('path')
				.attr('fill', function(d, i) {  return color[i]; })
				.transition()
				.duration(1500)
				.ease('elastic')
				.attrTween('d', tweenPie)	
		})
	}
		
	//pieChart用tween関数	
	function tweenPie(b) {
	  b.innerRadius = 0;
	  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	  return function(t) { return arc(i(t)); };
	}
	
	//トランジション終了時にcallbackを呼ぶヘルパー関数
	function endall(transition, callback) { 
		var n = 0; 
		transition 
			.each(function() { ++n; }) 
			.each('end', function() { if (!--n) callback.apply(this, arguments); }); 
	};

})();

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js