0

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

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

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

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

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

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

截屏： 截屏

4

2 回答 2

1

我有分层布局图，它由大约 615 个节点和 614 个边组成（不包括 40 个奇数集群节点，其中一些是集群集群）。我遇到了与 visjs 相同的问题。

帮助我解决这个问题的一件快速的事情是显式调用网络.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()。

于 2017-01-07T00:59:56.547 回答
0

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

于 2016-11-04T03:52:40.173 回答