var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var pie_data = d3.pie() .sort(null) .value(function(d){return d.val;}) (data_set) ; var forground_arc = d3.arc() .startAngle(0) .endAngle(Math.PI*2*0.75) .outerRadius(200) .innerRadius(0) ; var forground_tween = d3.arc() .startAngle(Math.PI*2) .endAngle(0) .outerRadius(200) .innerRadius(0) ; var color_scale = d3.scaleOrdinal() .domain( d3.min(data_set, function(d){ return d.val; }), d3.max(data_set, function(d){ return d.val; })) .range( d3.schemeCategory20 ) ; var arc = d3.arc() .outerRadius( 200 ) .innerRadius( 0 ) ; var label_arc = d3.arc() .outerRadius( 150 ) .innerRadius( 150 ) ; var pie_chart = d3.select("#content") .selectAll(".arc") .data(pie_data) .enter() .append("g") .attr("class", "arc") .attr("transform", "translate(300, 200)") ; var pies = pie_chart.append("path") ; function tweenPie(b) { var i = d3.interpolate({startAngle: 0, endAngle: 0}, b); return function(t) { return arc(i(t)); }; } // 定期的にアニメーション描画 setInterval(function() { pies .style("fill", function(d,i){ return color_scale( d.data.val ) ; }) .transition() .ease(d3.easeBounce) .duration(2000) .attrTween("d", tweenPie) }, 3000);
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content" width="600" height="400"></svg>