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

ありがとう。