在Cytoscape.js中使用dagre布局時如何處理多棵樹的情況

Question

我是Cytoscape.js的新手，並嘗試根據用戶的搜索輸入在Dagre布局的幫助下繪制圖形。 節點數通常為50-100。

盡管Dagre對於單個樹效果很好，但是當圖形包含幾棵樹（有時包括獨立的節點）時，這些樹的根會自動水平排列（如圖所示），這使得節點和標簽變得非常小。 如果我們可以利用水平空間，那么圖表肯定會更清晰。

我的問題是，如何處理多棵樹的情況，垂直排列樹（例如，一行中有4個根，而其他根可以布置在這些樹下）以充分利用布局空間。

Answer 1

看一下rankDir選項以了解布局的方向： http : rankDir

要獲得更多控制，請嘗試為每個子圖/樹運行一個布局： http : //js.cytoscape.org/#collection/layout

您可以使用每個子圖的boundingBox來控制子圖的位置。

另請參閱Dagre文檔以獲取有關配置選項的詳細信息： https : //github.com/cpettitt/dagre/wiki