Vis.js 添加很多节点时不显示图形

Question

我正在制作一个 Web 应用程序以使用 Vis.js 显示项目之间的关系，一切正常，直到我需要显示约 260 个节点，它们之间有约 1200 条边。

一旦我达到该数量的节点，图表只显示空白 space 和一条蓝线，没有其他任何内容。我一尝试缩放它，线条就消失了，全是白色的。

当我查看节点的位置时，我可以看到它们中的许多节点处于负值或非常大的 x, y 位置（通常 x 为 -300，y 为 478759527705558300000 左右）。

我试过禁用物理功能，但无济于事。该图处于分层模式，在代码中手动设置了级别，但级别是正确的。

网络选项（improvedLayout 选项只是我在互联网上找到的一个可能性；如果我删除它，它仍然有效）：

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

截图：

Answer 1

解决这个问题，可以调整层级布局参数，比如nodeSpacing、levelSeparation、treeSpacing。这是一个例子 hierarchicalLayoutWithoutPhysics

Answer 2

我有一个分层布局图，它由大约 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()。

Vis.js 添加很多节点时不显示图形

Vis.js not showing graph when many nodes are added

javascript

vis.js

vis.js-network