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