@ -20,11 +20,79 @@
Create a simple network with some nodes and edges.
Create a simple network with some nodes and edges.
< / p >
< / p >
< div id = "div_graph " > < / div >
< div id = "visualization " > < / div >
< script type = "text/javascript" >
< 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 >
< / script >
< button id = "btnPrevious" type = "button" onclick = "StepBack();" > < < < / button >
< button id = "btnNext" type = "button" onclick = "StepNext();" > >>< / button >
< / body >
< / body >
< / html >
< / html >