Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active Aug 29, 2015
Embed
What would you like to do?
Pie Chart Button

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

document

<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
(function(){
"use strict";
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment