|
|
- <!doctype html>
- <html>
- <head>
- <title>Network | Basic usage</title>
-
- <script type="text/javascript" src="http://www.visjs.org/dist/vis.js"></script>
- <link href="http://www.visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
-
- <style type="text/css">
- #div_graph {
- width: 1400px;
- height: 1000px;
- border: 1px solid lightgray;
- }
- </style>
- </head>
- <body>
-
- <p>
- Create a simple network with some nodes and edges.
- </p>
-
- <div id="visualization"></div>
-
- <script type="text/javascript">
-
- var nodes = new vis.DataSet([
- {id: '1', label: 'Test1', step : 1},
- {id: '2', label: 'Test2', step : 2},
- {id: '3', label: 'Test3', step : 3}
- ]);
-
-
-
- var edges = new vis.DataSet([
- {from: '1', to: '2', label: '1'},
- {from: '3', to: '2'}
- ]);
-
-
- var currentStep = 1;
- var maxStep = nodes.length;
- var nodesView = new vis.DataView(nodes, {
- filter: function(node)
- {
- if(node.hasOwnProperty('step'))
- return node.step <= currentStep;
- else
- return false;
- }
- });
-
-
-
-
- var options = {
- width : '100%',
- height : '100%',
- };
-
-
- console.log(nodesView, edges)
- // create a network
- var container = document.getElementById('visualization');
- var data = {
- nodes: nodesView,
- edges: edges
- };
-
- var network = new vis.Network(container, data, options);
- // nodesView.refresh();
-
-
-
- function StepNext()
- {
- currentStep = currentStep + 1;
- if(currentStep > maxStep)
- currentStep = maxStep;
- nodesView.refresh();
- }
-
- function StepBack()
- {
- currentStep = currentStep - 1;
- if(currentStep < 1)
- currentStep = 1;
- nodesView.refresh();
- }
-
- </script>
-
-
- <button id="btnPrevious" type="button" onclick="StepBack();"><<</button>
- <button id="btnNext" type="button" onclick="StepNext();">>></button>
-
- </body>
- </html>
|
