| <!DOCTYPE html> | |
| <html> | |
| <head> | |
|     <meta charset="utf-8"> | |
|     <title>JS Bin</title> | |
|     <script type="text/javascript" src="../dist/vis.js"></script> <!-- network handling framework --> | |
|     <link href="../dist/vis.css" rel="stylesheet" type="text/css"/> | |
|     <style type="text/css"> | |
|         #network{ | |
|             width: 1200px; | |
|             height: 800px; | |
|             border: 1px solid lightgray; | |
|         } | |
|     </style> | |
| </head> | |
| <body> | |
| <h1>Network Test</h1> | |
| <div id="network"></div> | |
| 
 | |
| <script type="text/javascript"> | |
|     // create a network | |
|     var container = document.getElementById('network'); | |
|     var nodes = new vis.DataSet([]); | |
|     var edges = new vis.DataSet([]); | |
| 
 | |
|     // create a network | |
|     var data = { | |
|         nodes: nodes, | |
|         edges: edges | |
|     }; | |
| //    data.nodes.update({id: 0, label: 'node 1'}); | |
|     var fontFace = 'roboto,"helvetica neue","segoe ui",arial,helvetica,sans-serif'; | |
|     var options = { | |
|         autoResize: true, | |
|         interaction: { | |
|             hover: true | |
|         }, | |
|         width: '100%', | |
|         height: '400px', | |
|         nodes: { | |
|             shape: 'dot', | |
|             font: { | |
|                 size: 13, | |
|                 face: fontFace, | |
|                 strokeColor: '#fff', | |
|                 strokeWidth: 5 | |
|             } | |
|         } | |
|     }; | |
|     var network = new vis.Network(container, data, options); | |
| 
 | |
|     function info(s) { | |
|         document.getElementById('num').innerText += s + '\n'; | |
|     } | |
| 
 | |
| 
 | |
| 
 | |
| 
 | |
| 
 | |
| 
 | |
| </script> | |
| </body> | |
| </html> |