D3.js Pie Chart Animate Counterwise

As the title says. How can I reverse the animation path in a pie (D3.js). As default, the pie renders clockwise with animation. How do I reverse it? See picture example. JS here:

Solution 1:

Just swap endAngle with startAngle:

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

Check the snippet:

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) { returncolor(i); })
    .attr("d", arc)
    .transition()
            .duration(1000)
            .attrTween("d", function (d) {
                var i = d3.interpolate(d.endAngle, d.startAngle);
                returnfunction (t) {
                    d.startAngle = i(t);
                    returnarc(d);
                }
            });

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