D3 Sunburst arc sizes | 易学教程

问题

I am trying to create a D3 sunburst chart based on this example:

https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099

I'd like the arcs created to close the full circle but they don't.

For testing purpose and simplicity, the sum of every element's size in the the same depth equals 360.

Follows my jsFiddle:

https://jsfiddle.net/igasparetto/uz8rz13d/

Something is telling me the problem is on these lines:

var partition = d3.partition();

var arc = d3.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x0))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x1))); })
.innerRadius(function(d) { return Math.max(0, y(d.y0)); })
.outerRadius(function(d) { return Math.max(0, y(d.y1)); });

Thanks

回答1:

Your problem appears to be that size variables defined for the parent nodes are included when you do root.sum to make values. Essentially the parent value is set not just to be the sum of its children, but you get the parent size added as "free space"

https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sum

"The node.value property of each node is set to the numeric value returned by the specified function plus the combined value of all descendants."

This works as it ignores non-leaf node size values:

  root.sum(function(d) { return !d.children || d.children.length === 0 ? d.size :0; });

https://jsfiddle.net/uz8rz13d/2/

来源：https://stackoverflow.com/questions/41649418/d3-sunburst-arc-sizes

标签

javascript

d3.js