D3.js饼图反向动画 [英] D3.js pie chart animate counterwise

问题描述

如标题所述。如何反转饼图（D3.js）中的动画路径。默认情况下，饼图使用动画顺时针渲染。如何将其反转？

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?

查看图片示例。

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

推荐答案

只需交换 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>

这篇关于D3.js饼图反向动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！