CODEWITHSUNDEEP
vis.jsvis.js-network
foufrix
foufrix

Reputation: 1456

Predefine Layout using Vis.js network

I would like to know if there is a way to inject a predefine layout in Vis.

I managed to save all coordinate of my nodes (X : Y) when i drag an drop each node, which is then saved to the database with a specified ID for each nodes.

What i struggle with is to specified this dataset to vis when i initialize a map with vis ( here is the doc of layout initilisation : http://visjs.org/docs/network/layout.html#)

i would like to put an array with my id nodes and position X Y so that it get saved when user change their layout.

It appears that it is not possible, but maybe there is a hidden way ?

Thanks in advance

Upvotes: 0

Views: 2226

Answers (2)

YakovL
YakovL

Reputation: 8316

This is quite possible:

  • to set initial layout, just add coordinates to each node (and disable physics so that they don't flow away from their positions):

    nodes = [{id:1, label:'some', x:100, y:0 }, ... ];
options = { physics: false, ... };

  • to get current coordinates, use network.getPositions()

  • to save those at layout change, you probably want to use the dragEnd event and the on method (use network.getPositions() inside the event handler)

You can opt my implementation in the VisGraphPlugin repo (it's a plugin for TiddlyWiki Classic), just look for dragEnd and saveDataAndOptions, the latter may be of interest.

Upvotes: 1

João Menighin
João Menighin

Reputation: 3225

Instead of saving positions and id's you can simply use getSeed() method to save your layout configuration in a seed. Then, when you start the network again you can load this seed into the layout.randomSeed to have the same configuration.

The documentation for getSeed() says:

If you like the layout of your network and would like it to start in the same way next time, ask for the seed using this method and put it in the layout.randomSeed option.

Upvotes: 1

Related Questions