D3.js樹布局畫布調整大小

Question

這是我使用d3.js構建可折疊樹布局的工作的延續。

從平面JSON生成（多級）flare.json數據格式

布局看起來像：（ http://bl.ocks.org/mbostock/raw/4339083/ ）具有大約3k節點，一些節點的深度大約為25。我需要設置的畫布的當前大小是8000px寬度和8000px高度，以使所有節點可見，當渲染的樹級別數為2或3時，我知道這是不合理的。此外，我打算根據什么數據源使此代碼可與其他大小可能更大/更大的樹一起使用。 （json文件）已選擇。

因此，我想知道是否有可能相對於屏幕上顯示的節點位置/節點數來調整畫布大小。 這樣，代碼將更具系統性和適應性。

我看見了這個：

根據子節點數量動態調整d3樹布局的大小

但這會調整樹的大小，如果您可以想象在大約3k個節點的樹的情況下，將很難閱讀和理解。

我知道這可能甚至與d3.js無關，但我標記了它來解釋我的問題，並也請了可能面臨類似情況的d3專家。

我還嘗試根據我的標准過濾掉無信息的節點，以使渲染的節點數少於實際數據。 （我知道我會遇到大樹的性能問題）。 任何幫助將非常感激。

注意：當我說畫布時，我指的是繪制樹的區域，而不是“畫布”。 我對行話不熟悉，因此請相應地閱讀。

Answer 1

我面臨着類似的問題，現在我找到了解決方案。 檢查此鏈接。 D3可折疊樹，節點合並問題

Answer 2

希望這對某人有幫助。

使用flare樹代碼作為我正在構建的基礎時，我也遇到了類似的問題，建議的鏈接似乎沒有說明節點結構的大量差異？ 我要顯示很多樹，其中包含動態數量的節點和結構。 此解決方案為我工作：

關於高度：在觀察每個節點的平移偏移量之后，我了解到dx（相對於dy，因為樹被翻轉）是距根節點的偏移量，根上方的節點變為負，而下方的節點變為正。 因此，每次添加節點時，我都會“計算”兩個方向上的最大偏移，然后利用該信息調整畫布高度和視圖轉換（根的起點）。

對於寬度：最大d.depth *由（代碼使用的y長度歸一化）+邊距

 let aboveBount = 0 let belowBound = 0 let maxDepth = 0 nodeEnter.each( (d) => { if( Math.sign(dx) === -1 && dx < boundAbove) { boundAbove = dx } if( Math.sign(dx) === 1 && dx > boundBelow) { boundBelow = dx } if( d.depth > maxDepth){ maxDepth = d.depth } }) const newHeight = boundBelow + Math.abs(boundAbove) + nodeHeight*2 + margin.top*2 svg.style('height', newHeight) svg.style('width'. maxDepth*180 + margin.left*2) //180 was the amount set to normailze path length svg.attr('transform', `translate(${margin.left}, ${Math.abs(boundAbove) + margin.top})`) 

好吧，最良好的祝願和快樂的編碼！