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