Making different size of `radius` to create `arc` not working

Question

I am creating pie chart using d3.js. I would like to create 3 pies with single svg element with animation.

This is working fine for me. But do creating different I am reducing the radius each time using a loop. But the radius not getting changed. How to solve this?

my code (sample) :

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 tweenPie(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', tweenPie)

  }

}

Live Demo

Answer 1

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

    }

}