jeroen.verhoest
jeroen.verhoest

Reputation: 5183

Edit the innerRadius of D3 Sunburst visualization

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?

Upvotes: 4

Views: 7140

Answers (2)

TimBrighton
TimBrighton

Reputation: 219

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.

Upvotes: 2

VividD
VividD

Reputation: 10536

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

Upvotes: 8

Related Questions