D3 Sunburst弧形大小

Question

我正在尝试基于这个例子创建一个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)); });

Thanks

- igasparetto

Answer 1

您的问题似乎是在进行root.sum以生成值时，包括了为父节点定义的大小变量。实质上，父值不仅被设置为其所有子项的总和，而且您还会得到父大小被添加为“空闲空间”的情况。

每个节点的节点值属性被设置为由指定函数返回的数字值加上所有后代的组合值。这在忽略非叶节点大小值时有效。请参考：https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sum。

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

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

- mgraham

---

好答案，你比我更快，我正在这个链接上工作，它移除了非叶节点的大小。 - Mark