JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<script src="https://d3js.org/d3.v4.js"></script>
  <svg id="content" width="600" height="400"></svg>

JavaScript

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);