title: D3 js multi level pie chart animation
body: <p>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.</p>
  
  <p>Any help would be appreciated.Thanks:)</p>
  
  <pre><code>&lt;script&gt;
  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);
         }
      });
  
  
      &lt;/script&gt;
  </code></pre>