4

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 Answer 1

9

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/

1
  • Good answer, you beat me to it, I was working on this which removed the size from non-leaf nodes.
    – Mark
    Jan 14, 2017 at 16:28

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.