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

Question

我使用D3基於樹的佈局的基礎上，可摺疊樹佈局例子here。

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

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

希望這是可能的！

Answer 1

您可能會在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參數，我懷疑它會提供更好的視覺顯示效果，而不是隨意將節點推得儘可能遠。

Answer 2

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

// 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