D3.js - donut charts with multiple rings and transition animations

Question

How can you add a transition animation effect to the next D3 multi-ring diagram?

As shown here D3.js are donut diagrams with several 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

You need to add the .transition method to your 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)); }; } 

I just link to this site

Here is a forked violin

It’s not clear how you want to animate the diagrams.