Add padding to sunburst layout d3 v4 - d3.js

Question

Following this example I am creating a sunburst diagram. I would like to add a bit of padding between each node. Here is the code I have so far:
var sunburstLayout = d3.partition();
var radius = 100;
sunburstLayout.size([2*Math.PI, radius]);
//sunburstLayout.padding(2);
var arc= d3.arc()
.startAngle( function(d) { return d.x0 })
.endAngle( function(d) { return d.x1 })
.innerRadius(function(d) { return d.y0 })
.outerRadius(function(d) { return d.y1 })
root.sum(d => d.value);
...
which produces this:
Now when adding:
sunburstLayout.padding(2);
The layout is messed up.
sunburstLayout.padding(1);
Any suggestions on how to keep the layout correct while being able to add padding to each node?

Answer 1

It seems to me that you just found a limitation of this padding method. If you look at the source code...
function positionNode(dy, n) {
return function(node) {
if (node.children) {
treemapDice(node, node.x0, dy * (node.depth + 1) / n, node.x1, dy * (node.depth + 2) / n);
}
var x0 = node.x0,
y0 = node.y0,
x1 = node.x1 - padding,
y1 = node.y1 - padding;
if (x1 < x0) x0 = x1 = (x0 + x1) / 2;
if (y1 < y0) y0 = y1 = (y0 + y1) / 2;
node.x0 = x0;
node.y0 = y0;
node.x1 = x1;
node.y1 = y1;
};
}
... you'll see that it works for linear distances, but it doesn't work for radial layouts, where x and y don't represent a cartesian coordinate. Therefore, it can be used for icicles, but nor for sunbursts.
A quick and dirty workaround is changing the arc generator instead, using padAngle and adding the linear value in both innerRadius and outerRadius (in innerRadius you add the value, and in outerRadius you subtract the value). That gives us:
This is the updated CodePen: https://codepen.io/anon/pen/QBWMKm?editors=0010