How to set options in vis js?

Question

How can I set options in my network using Vis.js library ?

I can't find any answer. Everyone say :

network.setOptions(options);

But I do not understand. How can I edit these options ?

I want to toggle the zoomView in the network.

$("#zoom-network").click(function(e) { 
    // what to do here ? 
    network.setOptions(options); 
});

EDIT Thanks to AlexP, I found the answer :

$("#zoom-network").click(function(e) {
    var options = {
        interaction : {
            zoomView : true
        }
    };
    network.setOptions(options);
});

[Set Zoom Level in Vis.js](http://stackoverflow.com/questions/27450311/set-zoom-level-in-vis-js) — alexP, Apr 18 '16 at 12:59
@alexP It does not answers :( I already seen it (sorry if bad english) — Mourad Qqch, Apr 18 '16 at 13:09

score 2 · Accepted Answer · answered Apr 18 '16 at 13:22

2

For animations like zooming you have to use .moveTo

$("#zoom-network").click(function(e) { 
    var options = { 
      scale: 1.5,
      animation: {      
        duration: 1000,
        easingFunction: "easeInOutQuad"
      }
    }
    network.moveTo(options); 
});

answered Apr 18 '16 at 13:22

alexP

3,672
7
27
36

Perfect ! Thank you ! It worked ! (see my edit for the code) – Mourad Qqch Apr 18 '16 at 13:51

score 0 · Answer 2 · answered Apr 18 '16 at 12:57

<!doctype html>
<html>
<head>
  <title>Network | Basic usage</title>

  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>

<p>
  Create a simple network with some nodes and edges.
</p>

<div id="mynetwork"></div>

<script type="text/javascript">
  // create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var network = new vis.Network(container, data);
  network.setOptions(options);
</script>
</body>
</html>

I know that. But how can I do to (un)set the zoomView **without** resetting previous options after the creation of the network ? (based on an event for exemple) — Mourad Qqch, Apr 18 '16 at 13:04
`$("#zoom-network").click(function(e) { // what to do here ? network.setOptions(options); });` — Mourad Qqch, Apr 18 '16 at 13:05

score 0 · Answer 3 · answered May 30 '18 at 23:51

You can set individual options (for example, you may wish to only set the "end" option if you have a valid date to supply). So assuming you have a previously set options object, as in the answers above, WITHOUT the "end" option set, you would use code like:

 if (this.end != null) {
       this.options["end"] = this.end;
 }

How to set options in vis js?

3 Answers3