D3.js - Donut charts with multiple rings

Question

The following example shows a donut chart in D3.js, is it possible to add more than one ring to the chart?

var dataset = {
  apples: [53245, 28479, 19697, 24         


        

Answer 1

Using the fiddle you posted, there is an "arc" defined in the fiddle here:

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

That arc is what's used to build the ring graph here:

var path = svg.selectAll("path")
    .data(pie(dataset.apples))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

So if you just made a different arc for each of your data sets with a variety of radii, you would have additional rings in your chart.