Search code examples
javascriptvis.jsvis.js-network

vis.js network fit function


I am using vis.js 4.16.1 to draw the network graphs. Currently I have two network graphs. One network graph for the user drawing. After the user has done, I want to copy exactly whatever the network graph is to the second network graph. However, I can't set the same viewpoint as the first one. This is the options for the first network:

options = {
    locale: 'en',
    physics: {
        "enabled": false,
    },
    edges: {
        smooth: {
            type: 'continuous'
        }
    },
    interaction: {
        navigationButtons: true,
        selectConnectedEdges: false
    }
};

I have disabled the physics to allow the user organize the node themselves.
This is the options for the second network:

var options = {
    locale: 'en',
    physics: {
        "enabled": false
    },
    edges: {
        smooth: {
            type: 'continuous'
        }
    },
    interaction: {
        dragNodes: false,
        dragView:true
    }
};

When I use the fit function (http://www.cse.unsw.edu.au/~mike/myrlibrary/visNetwork/doc/network/)

var fitOption = {
    nodes: nodes.getIds() //nodes is type of vis.DataSet contains all the nodes
}
secondNetwork.fit(fitOption);

There is nothing changed. When I use the moveTo function:

var centerOptions = {
    position: {
        x: firstNetwork.getViewPosition().x, 
        y: firstNetwork.getViewPosition().y},
    }
}
secondNetwork.moveTo(centerOptions);

Still, I can't move my canvas to the point where the first network focused on. The canvas is not moving at all. Could someone give me some suggestions? Thanks in advance,


Solution

  • Thanks Reiner, I have figure out the reason why fit() and moveTo() function are not working in my context, I need set the option:

     physics: {
         "enabled": true
     }
    

    otherwise it's not working. What did is before I call my fit() function, change enabled to true, call fit() function, then set enabled to false.