D3.js - Donut charts with multiple rings and animation transition

Question

How can you add a transition animation effect to the following D3 chart with multiple rings?

As shown here 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>

Peen

You can do this in the same way as for single-ring charts -- with a custom tween function. The only thing to keep in mind is that the radii vary depending on which ring it is. – Hire

@LarsKotthoff THat didn't work. can you please explain with an example? – Peen

Well, what exactly did you try and how did it not work? – Hire

@LarsKotthoff what I tried is in the question details above. What else would you change? SIngle rings is easy but with multiple rings it doesn't seeem to work – Peen

You don't have any transitions in your code. – Hire

@LarsKotthoff please illustrate what you mean with sample code – Peen

You don't have any transitions in your code. How am I supposed to illustrate your code? – Hire

@LarsKotthoff My code is right there. If you really want ot help, just add the transitions where you say they have to be. – Peen

What is it you want to animate? Like: when do transitions occur and what does change? (e.g. click ring, that ring changes) – Ofay

What transitions do you wish to add ? To have transitions you need data to transition to and from. – Ri

@Ri animate on load i.e. the simplest most common animation – Peen

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 referenced this site

Here is a forked fiddle

It's not clear as to how you want to animate the charts.

Esquibel

Your fiddle does not animate like the example you linked to. I just want a simple on load animation – Peen

@SoniAli you need to transition from one state to another; The example I linked to had 2 datasets; I put together an example here – Esquibel