d3径向擦除动画剪辑一个元素

Question

此代码的目的是单击一个饼图切片，并使所有切片以缩小和扩展的方式进行动画处理。当我为单个元素运行以下代码时，它们都可以工作。当我尝试同时为所有弧设置动画时，最小的弧消失。小提琴http://jsfiddle.net/fk03xyap/

 var data = [50,20,30];
    var svgConfig = {
        height: 1000,
        width: 1000,
        id: 'mySvg',
        transform: 'translate(500,300)'
    };
    var colors = ['blue','gray','green'];

    var pie = d3.layout.pie().value(function(d) { return d;});
    var arcGen = d3.svg.arc()
            .outerRadius(100)
            .innerRadius(10);
    var svg = d3.select('body').append('svg').attr(svgConfig);
    var g = svg.selectAll('.arc')
            .data(pie(data))
            .enter()
            .append('g')
            .attr('transform','translate(100,200)')
            .attr('class','arc');
    var paths = g.append('path').attr('d',arcGen).style('fill',function(d,i){
        return colors[i];
    });

    d3.selectAll('path').on('click', function () {

        var el = d3.select(this);
        var g = d3.select('g');
        var paths = d3.selectAll('path');
        var endAngle,startAngle,orig;
        paths.transition().duration(250).attrTween('d',function(d){
            orig = d;
            console.log('orig',orig);
            endAngle = d.endAngle;
            startAngle = d.startAngle;
            console.log('first');
            var interpolate = d3.interpolate(d.endAngle, d.startAngle +.01);
            return function(t){
                d.endAngle = interpolate(t);
                return arcGen(d);
            };
        }).transition().duration(755).attrTween('d',function(r){
            console.log('orig new',orig);
            var interpolate = d3.interpolate(r.startAngle,endAngle);
            return function(t){
                r.endAngle = interpolate(t);
                return arcGen(r);
            };
        });
    });