D3.js – Donut charts with multiple rings

by

Yes, you can do this quite easily. The key is to use nested selections. That is, you pass in your top level list of lists and create a container element for each list. Then you do the nested selection and draw the actual elements. In this particular case, you also need to adjust the radii of the arcs so that they don’t overlap.

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);
  });

Updated jsfiddle here.

More Related Contents:

  1. Selecting null: what is the reason behind selectAll(null) in D3?
  2. How to load data from a CSV file in D3 v5
  3. Cannot use attr with an object in D3 v4
  4. variable scope in d3 javascript
  5. Scaling d3 v4 map to fit SVG (or at all)
  6. Highlight selected node, its links, and its children in a D3 force directed graph
  7. Replacing d3.transform in D3 v4
  8. How can I bring a circle to the front with d3?
  9. How do I include newlines in labels in D3 charts?
  10. Retrieve DOM target from drag callback when `this` is not available
  11. Resize svg when window is resized in d3.js
  12. Invoke a callback at the end of a transition
  13. Updating SVG Element Z-Index With D3
  14. D3 Appending Text to a SVG Rectangle
  15. D3.js Map with Albers Projection: How to rotate it?
  16. Generate (multilevel) flare.json data format from flat json
  17. In d3, how to get the interpolated line data from a SVG line?
  18. Wrapping Text in D3
  19. D3 fill shape with image using pattern
  20. Initial Range selection in DC.js chart
  21. How to use x and width in a bar chart with scaleTime?
  22. d3 js – loading json without a http get
  23. Setting rounded corners for svg:image
  24. svg / d3.js rounded corners on one side of a rectangle
  25. Adding new nodes to Force-directed layout
  26. How do I return y coordinate of a path in d3.js?
  27. Dynamically resize the d3 tree layout based on number of childnodes
  28. Can’t make paths draw growing slowly with D3
  29. d3 sankey charts – manually position node along x axis
  30. clicking a node in d3 from a button outside the svg

Leave a Comment