score:1

Accepted answer

There is a single arc variable that is being used in the tweenPie method and in the for loop. Each time through the for loop, the arc variable is set to a new value. The tweenPie method is called for each pie chart after the for loop exits. As a result, all the pie charts are using the same tweenPie method which is using the arc created in the last for loop.

For each pie chart, you need to create a separate tweenPie method with its own arc. For example...

var array1 = [ 0, 200 ]

window.onload = function () {

    var width = 660,
        height = 200,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.category20();

    var arc = null;

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

    function getTweenPie(arc) {
        return function (finish) {
            var start = {
                startAngle: 0,
                endAngle: 0
            };
            var i = d3.interpolate(start, finish);
            return function(d) { return arc(i(d)); };
        }
    }

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

    for( var i = 0; i < 3; i++) {

        arc = d3.svg.arc()
            .innerRadius(radius - (5*i)) //each time size differs
            .outerRadius(radius - (6)*i); //each time size differs

        svg1.append('g')
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
            .datum(array1).selectAll("path")
            .data(pie) 
            .enter().append("path")
            .attr("fill", function(d, i) { return color(i); })
            .transition()
            .duration(5000)
            .attrTween('d', getTweenPie(arc))

    }

}

Related Query