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

Просто поменять endAngle с startAngle:

.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>