CODEWITHSUNDEEP
javascriptvis.jsvis.js-network
Judah Flynn
Judah Flynn

Reputation: 544

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,

Upvotes: 1

Views: 5924

Answers (2)

reinerBa
reinerBa

Reputation: 1660

You can use network.fit(), this will do the same as the upper button in the right-bottom corner. So all nodes will be focused.

You can use the Dataset-object for nodes and edges, than it its rather easy to copy all the nodes and edges to the same xy-coordinates with 

var xy = network1.edges.get(); 
network2.edges.add(xy);

Upvotes: 1

Judah Flynn
Judah Flynn

Reputation: 544

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.

Upvotes: 2

Related Questions