VisJS Stabilization

Question

I have a VisJS chart and I want it to "fit" as soon as I add content to it. I have about 200 nodes and 2000 edges.

I have defined these options, note I have said "fit:true" in Stabilization options.

However, if my stabilization iterations are less than 100, the chart does not fit at all.

I want to keep the number of stabilizations very low so that my chart loads soon - but I want to keep it fitted.

I am not able to get the chart fitted till I call the fit function many times over, and I am assuming there should be a very simple way to do this. Can someone please let me know.

var options = {
    nodes: {
        shape: 'dot',
        scaling: {
            label: {
                min: 20,
                max: 40
            },            

        }
    },

    edges: {
        smooth: {
            enabled: true,
            type: "dynamic",
        //   roundness: 0.5
        },},

    interaction: {

        multiselect: false,
        navigationButtons: true,
        selectable: true,
        selectConnectedEdges: true,
        tooltipDelay: 100,
        zoomView: true
    },
    physics: {
        stabilization: {
            enabled: true,
            iterations: 180, // maximum number of iteration to stabilize
            updateInterval: 10,
            onlyDynamicEdges: false,
            fit: true
        },
    }

};

Answer 1

I'm the developer of the network module of vis, it seems like you found a bug :).

The network should fit after the stabilization iterations have been completed. In the stabilization process is asynchronous so you should listen to the stabilizationIterationsDone event and call the fit function there as a quick fix.

You mention that you want to keep the network fitted, if you mean you want to keep fitting in each render iteration, I suppose the best way to do this is to call the fit function in the initRedraw event. This may be a little expensive though.

We try to collect all of these questions, bug reports and feature requests on our GitHub page. If you encounter anything else or have a question, please ask it there.

http://www.github.com/almende/vis

Cheers

Edit to answer your questions: It turns out that in v4,3 there is a bug that doesn't clean the support nodes of dynamic static edges, causing the fit to not do much in your case. This will be fixed on the next release.

As for the click events of the navigation buttons you'll have to bind them yourself. Basic idea: document.getElementById on the container. Then get the children and iterate over them. This way you get the Dom elements that are the buttons. addEventListener to add a listener to them and use that to trigger the click.