制作D3饼v4示例-在初始渲染时设置动画

<script src="https://d3js.org/d3.v4.min.js"></script>

<svg id="chart" width="400" height="400"></svg>

var data = [
  { name: "A", value: 30 },
  { name: "B", value: 50 },
  { name: "C", value: 20 }
];

var pie = d3.pie()
  .value(function(d) { return d.value; });

var arc = d3.arc()
  .innerRadius(0)
  .outerRadius(200);

var chart = d3.select("#chart");

var arcs = chart.selectAll("arc")
  .data(pie(data))
  .enter()
  .append("g")
  .attr("class", "arc");

arcs.append("path")
  .attr("d", arc)
  .attr("fill", function(d, i) { return d3.schemeCategory10[i]; });

arcs.append("path")
  .attr("d", arc)
  .attr("fill", function(d, i) { return d3.schemeCategory10[i]; })
  .transition()
  .duration(1000)
  .attrTween("d", function(d) {
    var interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d);
    return function(t) {
      return arc(interpolate(t));
    };
  });