添加许多节点时，Vis.js 不显示图形答案

【问题标题】：Vis.js not showing graph when many nodes are added添加许多节点时，Vis.js 不显示图形
【发布时间】：2016-07-20 10:54:04
【问题描述】：

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

一旦我达到了这么多节点，图表只会显示一个空白区域和一条蓝线，没有别的。当我尝试放大它时，这条线消失了，全是白色的。

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

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

网络选项（improvedLayout 选项只是我在互联网上找到的一种可能性；如果我删除它，它的工作原理是一样的）：

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

截图：

【问题讨论】：

您是否让 vis.js 管理布局并仅提供节点和边的数组？ x,y坐标数据从何而来？
@RobinMackenzie 我让 vis.js 管理布局，因为它是分层的，我提供节点（每个节点都有一个 levelargument）。它适用于较小的数据集
您可以在布局完成后尝试使用network.fit();，看看是否有缩放问题。
@RobinMackenzie 我尝试这样做，但没有任何改变。还是那一行。
也许用options 更新您的问题，例如new vis.Network(container, data, options);...

标签： javascript vis.js vis.js-network

【解决方案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()。

【讨论】：

对图书馆内部运作方式的有趣见解。我们最终（时间限制）不得不将这个修复留在“积压”中，所以我们没有找到任何真正的解决方案。但是，如果将来有时间调查您的解决方案，我会发布结果。谢谢！编辑：选择作为答案，因为它提供了一种解决方法

【解决方案2】：

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

【讨论】：

请不要发布“我也是”作为答案。相反，您可以将此问题加注为收藏夹，以便收到任何新答案的通知。一旦你有足够的声誉，you may also upvote 它，或add a bounty 以吸引更多关注。