D3 旭日形弧尺寸答案

【问题标题】：D3 Sunburst arc sizesD3 旭日形弧尺寸
【发布时间】：2017-01-14 11:24:42
【问题描述】：

我正在尝试基于此示例创建 D3 旭日形图：

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

我希望创建的弧线可以闭合整个圆，但它们没有。

出于测试目的和简单性，相同深度中每个元素的大小之和等于360。

跟随我的 jsFiddle：

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

有些东西告诉我问题出在以下几行：

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)); });

谢谢

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您的问题似乎是当您执行root.sum 生成值时，为父节点定义的大小变量被包含在内。本质上，父值不仅设置为其子项的总和，而且您将父项大小添加为“可用空间”

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

“每个节点的node.value属性设置为指定函数返回的数值加上所有后代的组合值。”

这是因为它忽略了非叶节点大小值：

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

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

【讨论】：

好答案，你打败了我，我是working on this，它从非叶节点中删除了大小。