D3樹佈局 - 力子節點使用的可用空間

我使用D3基於樹的佈局的基礎上，可摺疊樹佈局例子here。D3樹佈局 - 力子節點使用的可用空間

正如你可以在演示中看到，節點之間的垂直間距是樹中的每個水平不變，這意味着節點可以幫在一起，同時留下了大量的空白。

相反，我想每個級別採取所有可用的垂直空間。例如，具有2個節點的電平將具有在0％和100％間隔的節點，而3個個子節點將在0％，50％和100％隔開。

希望這是可能的！

2013-04-30 Graham

您可能會在How to get D3.js's tidy tree graph from reducing the lateral distance of siblings as depth increases（此問題與該問題重疊）和https://github.com/mbostock/d3/issues/317中找到一些有用的信息。後者提供了一個nodeSize參數，我懷疑它會提供更好的視覺顯示效果，而不是隨意將節點推得儘可能遠。

來源

2013-04-30 16:56:56

感謝您的指點。我結束了修改方法接受'nodeSize'作爲函數，這意味着我可以計算出大小動態地取決於該節點的深度和兄弟姐妹的數目。完美的作品。 – Graham 2013-05-06 08:38:20

好聽。您應該考慮向d3項目提交拉取請求以結合您的增強功能。 – 2013-05-06 13:37:47

你可以只修改「功能更新（源）」，此功能下添加如下代碼：

// Recompute the new height 
var levelWidth = [1]; 
var childCount = function(level, n) { 
    if(n.children && n.children.length > 0) { 
    if(levelWidth.length <= level + 1) levelWidth.push(0); 
    levelWidth[level+1] += n.children.length; 
    n.children.forEach(function(d) { 
     childCount(level + 1, d); 
    }); 
    } 
}; 
childCount(0, root); 
var newHeight = d3.max(levelWidth) * 40; 
tree = tree.size([newHeight, width]);

請參閱此像的具體問題和答案（Superboggly）： Dynamically resize the d3 tree layout based on number of childnodes

來源

2014-01-26 05:46:22 ZhangCC

D3樹佈局 - 力子節點使用的可用空間

回答

相關問題