使用vis.js绘制大树

问题描述

我正在尝试绘制一个相当大的网络(即〜1k节点和〜 1k边缘)与vis.js 4.21.0.这是我的选项对象:

I'm trying to plot a quite huge network (i.e., ~1k nodes and ~1k edges) with vis.js 4.21.0. Here is my options object:

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分钟的时间(请参见简化的JSFiddle ) .在此示例中，该示例比我的示例大得多，几乎可以即时渲染网络.

The problem is that it takes up to 4 minutes to render (see this simplified JSFiddle). In this example, much huger than the mine, the network is rendered almost instantaneously.

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

How can I speed up the rendering process of my chart?

推荐答案

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

Wait, your fiddle doesn't have all the options you mention in your post. For instance, the network is not shown at all before several minutes passes, but if you add physics: { stabilization: false } it is shown at once (although it is not static at that point and slowly relaxes). Moreover, adding barnesHut: { ... } to physics and adjusting springConstant changes the speed of relaxation.

但这是一个棘手的部分:将您拥有的未松弛树(使用stabilization: false)与vis.js 4.21.0和您使用获取！看起来好多了:

But here's a tricky part: compare the unrelaxed tree (with stabilization: false) that you have with vis.js 4.21.0 and the one that you get with 4.19.1! It looks much nicer:

比这个烂摊子

这是先前报道的，可能值得进一步探讨，但是我可以肯定地说，4.19.1使最初的甚至在放松之前，树上的东西都好看得多.使用此版本，您甚至可以转到physcis: false并获取:

This was reported earlier and probably deserves more digging but what I can say for sure is 4.19.1 makes the initial tree much nicer to see stuff even before getting relaxed. With this version you can even go physcis: false and get this:

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

I'd consider using this approach although it has drawbacks:

具有物理性质的版本在某种程度上也遭受了痛苦，所以...

the version with physics suffers from that to some extent too, so...

这篇关于使用vis.js绘制大树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！