我正在创建一个使用Vis.js
显示项目之间关系的网络应用程序,一切正常,直到我需要显示〜260个节点,它们之间有~1200个边缘。
一旦达到那个数量的节点,图表就会显示一个空格和一条蓝线,没有别的。一旦我尝试缩放它,线条就会消失并且全部都是白色。
当我查看节点的位置时,我可以看到它们中的许多位于负{= 1}位置(对于x通常为-300,对于y通常为478759527705558300000)。
我试过禁用物理,但无济于事。该图表处于层次结构模式,在代码中手动设置了级别,但级别是正确的。
网络选项(x, y
选项只是我在互联网上找到的一种可能性;如果我将其删除,它的工作原理相同):
improvedLayout
答案 0 :(得分:1)
我有分层布局图,它包含大约615个节点和614个边(不包括40个奇数簇节点,其中一些是簇的集群)。我和visjs陷入了同样的问题。
帮助我解决这个问题的一个简单的事情是使用指定迭代次数的参数显式调用network。stabilize()方法。默认迭代次数是1000.我通过了10000并且图表自我稳定。花了几秒钟,我很好。但随着数量节点增加到~1000,稳定时间开始增加。所以我开始研究用于解决方案的visjs代码。
在查看visjs代码时,我发现在函数setupHierarchicalLayout()内部有一个对_condenseHierarchy()的调用。 此方法尝试最小化节点和边缘之间的空白区域( 尚未完全理解代码 )。 _condenseHierarchy()修改节点的坐标。请参阅下面的_condenseHierarchy()之前和之后的Y坐标:
(this.body.nodes["node-11"]).y
1530
(this.body.nodes["node-11"]).y
64920
当节点到达远处时,需要进行大量迭代(稳定)以使其与图中的其他节点更接近。我禁用了_condenseHierarchy()并很好地显示了图表。
我确定禁用_condenseHierarchy()会带来一些其他问题,因为我会继续前进。我将花更多时间来理解和试验_condenseHierarchy()。
答案 1 :(得分:-1)
要解决此问题,您可以调整分层布局参数,例如nodeSpacing,levelSeparation和treeSpacing。以下是hierarchicalLayoutWithoutPhysics
的示例