Edit the innerRadius of D3 Sunburst visualization

Question

How can I change the radius of the innermost circle of the Sunburst visualization? See following example: (http://bl.ocks.org/d/910126/ - notice how large is central area; can it be smaller?)

Also, is it possible to define different heights for all the layers in the Sunburst?

Answer 1

I've just compared the examples above so can't claim any great skill\knowledge here but all the changes are in this section:

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return radius * Math.sqrt(d.y) / 10; })
    .outerRadius(function(d) { return radius * Math.sqrt(d.y + d.dy) / 10; });

The effects are interesting but not quite what I was looking for when I found this question\answer. I wanted to be able to control the size of each layer\ring individually really. Anyway... hope this picking apart of the jsfiddles above helps someone else.

Answer 2

Yes, it is possible.

---

Base Example

jsfiddle

---

Custom layer height 1

jsfiddle

---

Custom layer height 2

jsfiddle

---

Custom layer height 3

jsfiddle