D3 js multi level pie chart animation

Question

I created a multi-level pie chart but i am having trouble animate it on load. Here is the JS that i tryied.The animation works fine on the first circle of the chart , but it hides the other 2.

Any help would be appreciated.Thanks:)

<script>
var dataset = {
  final: [7000],
  process: [1000, 1000, 1000, 7000],
  initial: [10000],
};

var width = 660,
    height = 500,
    cwidth = 75;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("class","wrapper")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

var gs = svg.selectAll("g.wrapper").data(d3.values(dataset)).enter()
        .append("g")
        .attr("id",function(d,i){
            return Object.keys(dataset)[i];
        });

var gsLabels = svg.selectAll("g.wrapper").data(d3.values(dataset)).enter()
        .append("g")
        .attr("id",function(d,i){
            return "label_" + Object.keys(dataset)[i];
        });

var count = 0;
var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { 
        if(Object.keys(dataset)[j] === "final"){
            return arc.innerRadius(cwidth*j).outerRadius(cwidth*(j+1))(d); 
        }
        else{
            return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); 
        }
        })
    .transition().delay(function(d, i, j) {
            return i * 500; 
    }).duration(500)
    .attrTween('d', function(d,x,y) {
       var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
       return function(t) {
           d.endAngle = i(t);
         return arc(d);
       }
    });


    </script>

Answer 1

The main problem is that you're using the same arc generator for all of the different pie segments. That means that after the transition, all the segments will have the same inner and outer radii -- they are there, you just can't see them because they're obscured by the outer blue segment.

To fix this, use different arc generators for the different levels. You also need to initialise the d attribute to zero width (i.e. start and end angle the same) for the animation to work properly.

I've implemented a solution for this here where I'm saving an arc generator for each pie chart segment with the data assigned to that segment. This is a bit wasteful, as a single generator for each level would be enough, but faster to implement. The relevant code is below.

var path = gs.selectAll("path")
.data(function(d) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", function(d, i, j) { 
    d._tmp = d.endAngle;
    d.endAngle = d.startAngle;
    if(Object.keys(dataset)[j] === "final"){
        d.arc = d3.svg.arc().innerRadius(cwidth*j).outerRadius(cwidth*(j+1)); 
    }
    else{
        d.arc = d3.svg.arc().innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1)); 
    }
    return d.arc(d);
    })
.transition().delay(function(d, i, j) {
        return i * 500; 
}).duration(500)
.attrTween('d', function(d,x,y) {
   var i = d3.interpolate(d.startAngle, d._tmp);
   return function(t) {
       d.endAngle = i(t);
     return d.arc(d);
   }
});