D3 Sunburst. How To Set Different Ring\level Widths

Help! I've been searching for ages and not found anything about this. I basically want to be able to set the size (%, pixel, relative.. i don't mind) of each layer in a D3 sunburst

Solution 1:

Use a polylinear scale that reduces the upper reaches of a domain to a smaller portion of the output range - this blog from 2011 actually points out the ability to do this clearer than the official documentation - http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/

e.g. d3.scale.linear().domain([0,0.8,1.0]).range([0,0.98,1.0]);

Then apply that scale to your d.y and d.dy calculations as below -

0 to 0.8 will map to 0 to 0.98 of the range, leaving the last depth to map to just 2% of the radius on screen. This of course works as you have six rings, other numbers will need different cutoffs but in that case it's just looping through and finding the max of d.y.

var rscale = d3.scale.linear().domain([0,0.8,1.0]).range([0,0.98,1.0]);

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

http://jsfiddle.net/rh02t94h/3/

Solution 2:

To set custom widths and radius for each level of a sunburst, I hardcoded the inner and outer widths in this way

var partition = d3.layout.partition()
    .size([2 * Math.PI, (radius * radius) +50])
    .value(function(d) { return d.value; });
    var inner = {1: 300,2:360, 3:420, 4:480,5:540,6:600,7:660,8:720};
    var outer = {1: 350,2:410,3:470, 4:530,5:590,6:650,7:710,8:770};

    var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return inner[d.depth];})
    .outerRadius(function(d) { return outer[d.depth] });