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.

48 lines
1.2 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="../dist/vis.js"></script>
  5. <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">
  6. <style>
  7. #mynetwork {
  8. width: 1400px;
  9. height: 800px;
  10. border: 1px solid gray;
  11. }
  12. </style>
  13. </head>
  14. <body onload="draw()">
  15. <script src="https://rawgit.com/Tooa/6e17f2d7b8e34ef94719/raw/a10096a6b88c992c57d032b1ed3079d7cc4b1f51/data.js"></script>
  16. <div id="mynetwork"></div>
  17. <script>
  18. function draw() {
  19. // create an array with nodes
  20. nodes = new vis.DataSet([
  21. {id: 1, label: 'N1', color:"#FF0000"},
  22. {id: 2, label: 'N2'}
  23. ]);
  24. edges = new vis.DataSet([
  25. {id: '1%2', from: 1, to: 2},
  26. {id: '2%1',from: 2, to: 1}
  27. ]);
  28. var container = document.getElementById('mynetwork');
  29. var data = {
  30. nodes: nodes,
  31. edges: edges
  32. };
  33. var options = {edges:{arrows:'to'}};
  34. network = new vis.Network(container, data, options);
  35. nodes.update({id: '1', color: null});
  36. nodes.update({id: '1', color: "#FF00FF"});
  37. }
  38. var network, nodes, edges;
  39. </script>
  40. </body>
  41. </html>