| @ -0,0 +1,80 @@ | |||
| <!doctype html> | |||
| <html> | |||
| <head> | |||
| <title>Network | Random nodes</title> | |||
| <style type="text/css"> | |||
| body { | |||
| font: 10pt sans; | |||
| } | |||
| #mynetwork { | |||
| width: 600px; | |||
| height: 600px; | |||
| border: 1px solid lightgray; | |||
| } | |||
| </style> | |||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||
| <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
| <script type="text/javascript"> | |||
| var nodes = null; | |||
| var edges = null; | |||
| var network = null; | |||
| function draw() { | |||
| nodes = new vis.DataSet([ | |||
| {id: '1001', value: '1'}, | |||
| {id: '1009', value: '2'}, | |||
| {id: '1061', value: '3'}, | |||
| {id: '1226', value: '4'} | |||
| ]); | |||
| edges = new vis.DataSet([ | |||
| {id: '1001_1061', from: '1001', to: '1061'}, | |||
| {id: '1001_1226', from: '1001', to: '1226'}, | |||
| {id: '1009_1061', from: '1009', to: '1061'}, | |||
| {id: '1009_1226', from: '1009', to: '1226'}, | |||
| {id: '1061_1226', from: '1061', to: '1226'} | |||
| ]); | |||
| var container = document.getElementById('mynetwork'); | |||
| var data = { | |||
| nodes: nodes, | |||
| edges: edges | |||
| }; | |||
| var options = { | |||
| nodes: { | |||
| shape: 'dot' | |||
| }, | |||
| edges: { | |||
| inheritColor: false | |||
| }, | |||
| physics: { | |||
| 'barnesHut': { | |||
| centralGravity: 0.5, | |||
| springLength: 150, | |||
| springConstant: 0.03, | |||
| damping: 0.2 | |||
| } | |||
| } | |||
| }; | |||
| network = new vis.Network(container, data, options); | |||
| // add event listeners | |||
| network.on('select', function(params) { | |||
| document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; | |||
| console.log(params.edges) | |||
| console.log(network.getSelection()) | |||
| }); | |||
| } | |||
| </script> | |||
| </head> | |||
| <body onload="draw();"> | |||
| <br> | |||
| <div id="mynetwork"></div> | |||
| <p id="selection"></p> | |||
| </body> | |||
| </html> | |||