D3.js - Grafici ad anello con più anelli e transizione di animazione

Question

Come si può aggiungere un effetto di animazione di transizione al seguente grafico D3 con più squilli?

Come mostrato qui D3.js - Donut charts with multiple rings

var dataset = { 
 
       apples: [53245, 28479, 19697, 24037, 40245], 
 
       oranges: [53, 28, 19, 24], 
 
       lemons: [53245, 28479, 19697, 24037, 40245], 
 
       pears: [53245, 28479, 19697, 24037, 40245], 
 
       pineapples: [53245, 28479, 19697, 24037, 40245], 
 
      }; 
 

 
      var width = 460, 
 
       height = 300, 
 
       cwidth = 25; 
 

 
      var color = d3.scale.category20(); 
 

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

 
      var arc = d3.svg.arc(); 
 

 
      var svg = d3.select("#chart").append("svg") 
 
       .attr("width", width) 
 
       .attr("height", height) 
 
       .append("g") 
 
       .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
      var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g"); 
 
      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) { return arc.innerRadius(10 + cwidth * j).outerRadius(cwidth * (j + 1))(d); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<div id="chart" width="600" height="400"></div>

Answer 1

È necessario aggiungere il metodo .transition al vis

var path = gs.selectAll("path") 
    .data(function(d) { return pie(d); }) 
    .enter().append("path") 
//added line// 
    .transition().duration(750).attrTween("d", arcTween) 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); }); 

//added tween function 
function arcTween(a) { 
    var i = d3.interpolate(this._current, a); 
    this._current = i(0); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

ho appena fatto riferimento this site

Ecco un forked fiddle

Non è chiaro come si desidera animare i grafici.