Geek Answers Handbook

Stop vis.js after loading nodes, but allow draggable nodes

I am trying to draw a vis.js network diagram and load and host nodes. Then I want the physics to be disabled so that the nodes can be moved by the user. I tried this, but it does not work.

var options = { nodes: { borderWidth:4, size:60, color: { border: '#222222', background: 'grey' }, font:{color:'black'} }, edges: { arrows: { to: {enabled: false, scaleFactor:1}, middle: {enabled: false, scaleFactor:1}, from: {enabled: false, scaleFactor:1} }, color: 'black' }, { physics: enabled: false; };

Has anyone done this? if so, can you give an example or advice on the best way to achieve this. I also read the explanation located here , but not too familiar with java. I can not understand the steps.

thanks

+5
source share
3 answers

After some additional work and help from the vis.js developer, the code will be executed here, minus the json data and some parameters. The trick is to use the "stabilizationIterationsDone" event and disable the physics:

  // create a network var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { nodes: ..., edges: ..., physics: { forceAtlas2Based: { gravitationalConstant: -26, centralGravity: 0.005, springLength: 230, springConstant: 0.18, avoidOverlap: 1.5 }, maxVelocity: 146, solver: 'forceAtlas2Based', timestep: 0.35, stabilization: { enabled: true, iterations: 1000, updateInterval: 25 } } }; network = new vis.Network(container, data, options); network.on("stabilizationIterationsDone", function () { network.setOptions( { physics: false } ); });
+8
source

Suppose you first want the network to stabilize and only then turn off physics? In this case, you can download the Network with physics and stabilization enabled. Once the nodes are stabilized, the stabilized event occurs. Then you can disable the physics with network.setOptions

+3
source

I was able to figure this out, and now the code looks like this:

 // create a network var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { nodes: { borderWidth:1, size:45, color: { border: '#222222', background: 'grey' }, font:{color:'black', size: 11, face :'arial', }, }, edges: { arrows: { to: {enabled: false, scaleFactor:1}, middle: {enabled: false, scaleFactor:1}, from: {enabled: false, scaleFactor:1} }, color: { color:'#848484', highlight:'#848484', hover: '#848484', }, font: { color: '#343434', size: 11, // px face: 'arial', background: 'none', strokeWidth: 5, // px strokeColor: '#ffffff', align:'vertical' }, smooth: { enabled: false, //setting to true enables curved lines //type: "dynamic", //roundness: 0.5 }, } }; network = new vis.Network(container, data, options); network.setOptions({ physics: {enabled:false} }); }

I had to move network.setOptions() , as shown in the new code, and now it works as desired.

+2
source

More articles:


All Articles