d3.js - D3饼图中需要动画

Question

我使用以下代码创建了一个饼图。已应用简单的过渡从左侧滑动它。我需要应用一些更好的过渡，例如以直线和角度开始的圆一直增加到 360 度，以完成一个完整的圆或饼图的每个弧（部分）从直线和角度增加以使其完整弧

    var data = [10, 20, 40];
    var r = 200;
    var color = d3.scale.ordinal()
                .range(["red", "green","blue"]);

    var canvas = d3.select("body")
                .append("svg")
                .attr("width", 800)
                .attr("height", 800);

    var group = canvas.append("g")
                .attr("transform", "translate(-300,300)");

    var arc = d3.svg.arc()
                .innerRadius(r-100)
                .outerRadius(r);

    var pie = d3.layout.pie()
                .value(function (d){return d;});

    var arcs = group.selectAll(".arc")
                .data(pie(data))
                .enter()
                .append("g")
                .attr("class", "arc");
    arcs.append("path")
        .attr("d", arc)
        .attr("fill", function(d){return color(d.data)});

    arcs.append("text")
        .attr("transform", function(d){return "translate("+arc.centroid(d)+")";})
        .attr("text-anchor","middle")
        .text(function(d){return d.data;});

    group.transition()
        .duration(2000)
        .attr("transform", "translate(300,300)");

谢谢。