D3樹的佈局，所有葉子的根距離相同

Question

我使用此示例作爲基地D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing。

我需要的是一棵樹，其中所有的葉節點距離根都有相同的距離。 它應該看起來像Cluster Dendrogram。

我會使用Cluster Dendrogram，但它沒有縮放，平移和collapsibilty選項（我已經刪除了節點拖動）。這兩個例子之間的區別在於一個使用樹佈局而另一個使用集羣佈局。

所有的幫助和建議將不勝感激。

Answer 1

它可能不容易實現，因爲樹佈局喜歡它的深度，但你可以做這樣的事情。

nodes.forEach(function(d) {if(!d.children){ 
    d.depth = 3; //3 should be replaced with whatever your lowest depth is 
       //you could write a function to find it too. let me know if you need that 
}}) 

nodes.forEach(function (d) {d.y = d.depth * 300;}); 

這將完成您正在討論的部分內容，但沒有什麼可以防止節點在此處重疊。這篇文章：關於節點間​​距的Avoid overlapping of nodes in tree layout in d3.js可能有助於幫助