vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

58 lines
1.2 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Basic usage</title>
  5. <script type="text/javascript" src="../dist/vis.js"></script>
  6. <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
  7. <style type="text/css">
  8. #mynetwork {
  9. width: 600px;
  10. height: 400px;
  11. border: 1px solid lightgray;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p>
  17. Create a simple network with some nodes and edges.
  18. </p>
  19. <div id="mynetwork"></div>
  20. <script type="text/javascript">
  21. var nodes = new vis.DataSet()
  22. nodes.add({
  23. id: 'foo',
  24. label: 'foo',
  25. group: 'a'
  26. })
  27. var options = {
  28. groups: {
  29. a: {
  30. shape: 'image',
  31. image: 'http://sc.chinaz.com/Files/pic/icons/1075/Hustler_063.png',
  32. },
  33. b: {
  34. shape: 'image',
  35. image: 'http://d2.72sc.com/pic/141128/knymkdvpqvz.png'
  36. }
  37. }
  38. }
  39. var network = new vis.Network(document.getElementById("mynetwork"), {
  40. nodes: nodes
  41. }, options)
  42. setTimeout(function() {
  43. nodes.update({id: 'foo', group: 'b'})
  44. console.log("update")
  45. },3000)
  46. </script>
  47. </body>
  48. </html>