| <!doctype html> | |
| <html> | |
| <head> | |
|     <title>Network | Basic usage</title> | |
| 
 | |
|     <script type="text/javascript" src="../dist/vis.js"></script> | |
|     <link href="../dist/vis.css" rel="stylesheet" type="text/css" /> | |
| 
 | |
|     <style type="text/css"> | |
|         #mynetwork { | |
|             width: 600px; | |
|             height: 400px; | |
|             border: 1px solid lightgray; | |
|         } | |
|     </style> | |
| </head> | |
| <body> | |
| 
 | |
| <p> | |
|     Create a simple network with some nodes and edges. | |
| </p> | |
| 
 | |
| <div id="mynetwork"></div> | |
| 
 | |
| <script type="text/javascript"> | |
|     var nodes = new vis.DataSet() | |
|     nodes.add({ | |
|         id: 'foo', | |
|         label: 'foo', | |
|         group: 'a' | |
|     }) | |
| 
 | |
|     var options = { | |
|         groups: { | |
|             a: { | |
|                 shape: 'image', | |
|                 image: 'http://sc.chinaz.com/Files/pic/icons/1075/Hustler_063.png', | |
|             }, | |
|             b: { | |
|                 shape: 'image', | |
|                 image: 'http://d2.72sc.com/pic/141128/knymkdvpqvz.png' | |
|             } | |
|         } | |
|     } | |
| 
 | |
|     var network = new vis.Network(document.getElementById("mynetwork"), { | |
|         nodes: nodes | |
|     }, options) | |
| 
 | |
|     setTimeout(function() { | |
|         nodes.update({id: 'foo', group: 'b'}) | |
|         console.log("update") | |
|     },3000) | |
| 
 | |
| </script> | |
| 
 | |
| </body> | |
| </html>
 |