원형 차트 D3.js의 원형 차트

Question

제목에서 알 수 있듯이. 파이 (D3.js)에서 애니메이션 경로를 어떻게 반전시킬 수 있습니까? 기본적으로 파이는 시계 방향으로 애니메이션으로 렌더링됩니다. 그것을 어떻게 되돌릴 수 있습니까?

그림의 예를 참조하십시오. 여기

JS :

var pie = d3.layout.pie() 
     .sort(null) 
     .startAngle(1 * Math.PI) 
     .endAngle(3 * Math.PI) 
     .value(function (d) { return d.percentage; }); 

     g.append("path") 
      .attr("d", arc) 
      .style("fill", function (d) { return d.data.color; }) 
      .attr({ 
       "fill": function (d) { 
        return d.data.color; 
       } 
      }) 
      .transition() 
      .duration(1000) 
      .attrTween("d", function (d) { 
       var i = d3.interpolate(d.startAngle, d.endAngle); 
       return function (t) { 
        d.endAngle = i(t); 
        return arc(d); 
       } 
      }); 

Answer 1

그냥 startAngle와 endAngle를 교환 :

.transition() 
.duration(1000) 
.attrTween("d", function (d) { 
    var i = d3.interpolate(d.endAngle, d.startAngle); 
    return function (t) { 
     d.startAngle = i(t); 
     return arc(d); 
    } 
}); 

이 조각을 확인합니다

var dataset = { 
 
    apples: [5345, 2879, 1997, 2437, 4045], 
 
}; 
 

 
var width = 460, 
 
    height = 300, 
 
    radius = Math.min(width, height)/2; 
 

 
var color = d3.scale.category20(); 
 

 
var pie = d3.layout.pie() 
 
    .sort(null); 
 

 
var arc = d3.svg.arc() 
 
    .innerRadius(radius - 100) 
 
    .outerRadius(radius - 50); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
var path = svg.selectAll("path") 
 
    .data(pie(dataset.apples)) 
 
    .enter().append("path") 
 
    .attr("fill", function(d, i) { return color(i); }) 
 
    .attr("d", arc) 
 
    .transition() 
 
      .duration(1000) 
 
      .attrTween("d", function (d) { 
 
       var i = d3.interpolate(d.endAngle, d.startAngle); 
 
       return function (t) { 
 
        d.startAngle = i(t); 
 
        return arc(d); 
 
       } 
 
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>