4

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?)

enter image description here

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

VividD
  • 10,456
  • 6
  • 64
  • 111
jeroen.verhoest
  • 5,173
  • 2
  • 27
  • 27

2 Answers2

8

Yes, it is possible.

Base Example

jsfiddle

enter image description here

Custom layer height 1

jsfiddle

enter image description here

Custom layer height 2

jsfiddle

enter image description here

Custom layer height 3

jsfiddle

enter image description here

VividD
  • 10,456
  • 6
  • 64
  • 111
  • 5
    can you please explain what you did to modify each of these examples? i appreciate the code examples, but it's difficult to figure out the differences (and the logic) by looking at code in different windows. thanks! – rkstar Nov 24 '15 at 05:30
  • Can you make an example with v4 version of the d3.js library? – sintetico82 May 02 '17 at 16:50
2

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.

TimBrighton
  • 219
  • 3
  • 13