用 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). In this example，比我的大很多，网络几乎是瞬间渲染。

如何加快图表的渲染过程？

Answer 1

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

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

比这乱七八糟的：

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

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

物理版本在某种程度上也受到了影响，所以...

用 vis.js 绘制大树

Plotting huge trees with vis.js

javascript

charts

vis.js

vis.js-network