D3.js pie chart animate counterwise

2019-08-03 23:50发布

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.

enter image description here

enter image description here

JS here:

    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);
                }
            });

1条回答
甜甜的少女心
2楼-- · 2019-08-04 00:18

Just swap endAngle with 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);
    }
});

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) { 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>

查看更多
登录 后发表回答