<!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>