我正在尝试根据以下示例创建 D3 旭日图:
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099
我希望创建的弧线能够闭合整个圆,但它们没有。
为了测试目的和简单起见,同一深度中每个元素的大小之和等于 360。
遵循我的 jsFiddle:
https://jsfiddle.net/igasparetto/uz8rz13d/ 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
您的问题似乎是,当您执行以下操作时,会包含为父节点定义的大小变量root.sum
创造价值。本质上,父值不仅设置为其子值的总和,而且还可以将父值添加为“可用空间”
https://github.com/d3/d3-hierarchy/blob/master/README.md#node_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/ https://jsfiddle.net/uz8rz13d/2/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)