點擊重新定位根節點並調整窗口

Question

我構建了一個tree graph。

爲了計算在我的網頁股利高度，我數着終端節點（葉）在我的JSON對象，並乘以25
目前的結果我有150離開這樣的div高度爲3750px這是蠻好的。

當我隱藏孩子時，我想重新定位一個較小包裝中心的根節點。所以，我需要：

1. 計算最小樹高度（例如3端節點可見，min:3*50。），
2. 調整包裝高度（DIV）
3. 垂直對齊根節點在包裝
的中心

4. 回到原來的高度，當用戶點擊父節點，以顯示孩子

   // Toggle children on click. function click(d) { if (d.children) { d._children = d.children; d.children = null; // Hide children and count visible end-nodes } else { // Show children, count visible nodes recalculate height d.children = d._children; d._children = null; } update(d); }

Answer 1

我剛剛發現這個代碼，你可以把它放在你的function(update)裏面。這不是最好的解決辦法，但它是一個開始：

// compute 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); 
newHeight = d3.max(levelWidth) * 50;//number of pixels per line 

它給你的，每次更新樹，終端節點（葉）陣列時，取最大值數組中，並通過數值乘以（這裏我使用了50，每片50個像素）。你可以使用這個值來改變div的高度。

檢查更新的小提琴，並期待在控制檯中單擊每個時間：https://jsfiddle.net/gerardofurtado/b8hmwsm5/1/

同樣，不是最好的解決辦法，但我認爲，這將緩解在這裏做一些改進。