[英]D3 Sunburst arc sizes
我正在嘗試根據此示例創建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)); });
謝謝
您的問題似乎是當您執行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; });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.