2016-07-20 128 views
0

我正在製作一個web應用程序以顯示使用Vis.js的項目之間的關係,一切工作都很好,直到我需要顯示約260個節點,它們之間。當多個節點被添加時,Vis.js不顯示圖形

一旦我達到這個數量的節點,圖表只顯示空白和藍線,沒有別的。只要我嘗試縮放它,線條就會消失,而且全是白色的。

當我看到節點的位置時,我可以看到它們中的許多處於負值或非常大的位置(通常爲-300,x和y約爲478759527705558300000)。

我已經試過,無濟於事,禁用物理。圖表處於分級模式,在代碼中手動設置了級別,但級別正確。

網絡選項(在improvedLayout選項只是一種可能性,我發現在互聯網上;如果我刪除它,它的工作原理一樣的):

var options = { 
     layout: { 
      improvedLayout: false, 
      hierarchical: { 
       direction: direction, 
       sortMethod: "directed" 
      } 
     } 
    } 

截圖: Screenshot

+0

你讓vis.js管理佈局,只是提供節點和邊的數組? x,y座標數據來自哪裏? –

+0

@RobinMackenzie我讓vis.js管理佈局,因爲它是層次結構,我提供節點(每個節點都有一個'level'參數)。它適用於較小的數據集 – vagaerg

+0

在佈局完成後,您可以嘗試使用'network.fit();'來查看是否存在縮放問題。 –

回答

1

我有大約615個節點和614個邊緣(不包括40個奇數羣集節點,其中一些羣集羣集)組成的分層佈局圖。我與visjs一起陷入了同樣的問題。

幫助我解決這個問題的一件事就是用一個指定迭代次數的參數明確地調用network .stabilize()方法。默認的迭代次數是1000次。我通過了10000次,圖形穩定了很好。它花了幾秒鐘,我對此很好。但穩定時間隨着數量節點增加到約1000而增加。所以我開始研究visjs代碼的解決方案。

查看visjs代碼時,我發現裏面的函數setupHierarchicalLayout()有一個_condenseHierarchy()的調用。 此方法試圖最小化節點和邊緣之間的空白(尚未完全理解代碼)。 _condenseHierarchy()修改節點的座標。會看到Y以下之前和呼叫到_condenseHierarchy(後坐標):

(this.body.nodes["node-11"]).y 
1530 
(this.body.nodes["node-11"]).y 
64920 

當一個節點得到它需要大量的迭代遙遠位置(穩定),以與圖中的其它節點使其更接近在一起。我禁用了_condenseHierarchy()並且很好地顯示了圖形。

我確定禁用_condenseHierarchy()會帶來一些其他問題,因爲我進一步處理。我將花更多時間來理解和試驗_condenseHierarchy()。

+0

有趣的洞察圖書館如何在裏面工作。我們最終(時間限制)不得不在「積壓」中留下此修復,所以我們沒有找到任何真正的解決方案。但是,如果將來有時間調查您的解決方案,我會公佈結果。謝謝! 編輯:選擇答案,因爲它提供了一種解決方法 – vagaerg

-1

爲了解決這個問題,您可以調整分層佈局參數,如nodeSpacing,levelSeparation和treeSpacing。下面是一個例子hierarchicalLayoutWithoutPhysics

+0

請不要張貼「我也是」作爲答案。相反,你可以將這個問題列爲最受歡迎,以獲得任何新答案的通知。一旦你有足夠的聲望,[你也可以高調](http://stackoverflow.com/privileges/vote-up),或者[添加賞金](http://stackoverflow.com/privileges/set-bounties)吸引更多的關注。 –