用 vis.js 绘制大树

Question

我正在尝试使用 vis.js 4.21.0 绘制一个相当大的 network（即 ~1k 节点和 ~1k 边）。这是我的选项对象：

var options = {
    autoResize: true,
    height: '400px',
    clickToUse: false,
    layout: {
        hierarchical: {
            direction: 'UD',
            sortMethod: 'directed',
        }
    },
    physics: {
       stabilization: false,
       barnesHut: {
            gravitationalConstant: -80000,
            springConstant: 0.001,
            springLength: 200
       }
    },
    nodes: {
        shape: 'dot',
        size: 20,
        font: {
            size: 15,
            color: '#ffffff'
        },
        borderWidth: 2
    },
    groups: groups,
 };

问题在于渲染最多需要 4 分钟（参见 simplified JSFiddle）。在this example，比我的大得多，网络几乎是瞬间渲染的。

如何加快图表的渲染速度？

Answer 1

等等，你的小提琴没有你在帖子中提到的所有选项。例如，网络在几分钟过去之前根本不显示，但如果您添加physics: { stabilization: false }，它会立即显示（尽管此时它不是静态的并且会慢慢放松）。此外，在physics 中添加barnesHut: { ... } 并调整springConstant 会改变放松的速度。

但这里有一个棘手的部分：将您拥有的未松弛树（带有 stabilization: false）与 vis.js 4.21.0 和您拥有的 get 与 4.19.1 进行比较！它看起来好多了：

比这个烂摊子：

这是reported earlier，可能值得更多挖掘，但我可以肯定的是 4.19.1 使初始树在放松之前更容易看到东西。有了这个版本，你甚至可以去physcis: false 得到这个：

我会考虑使用这种方法，尽管它有缺点：

物理的版本也有一定的缺陷，所以...