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.

83 lines
2.2 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Playing with Physics</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt sans;
  8. }
  9. #mynetwork {
  10. float:left;
  11. width: 600px;
  12. height: 600px;
  13. margin:5px;
  14. border: 1px solid lightgray;
  15. }
  16. #config {
  17. float:left;
  18. width: 400px;
  19. height: 600px;
  20. }
  21. p {
  22. font-size:16px;
  23. max-width:700px;
  24. }
  25. </style>
  26. <script type="text/javascript" src="../exampleUtil.js"></script>
  27. <script type="text/javascript" src="../../../dist/vis.js"></script>
  28. <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
  29. <script type="text/javascript">
  30. var nodes = null;
  31. var edges = null;
  32. var network = null;
  33. function draw() {
  34. nodes = [];
  35. edges = [];
  36. // randomly create some nodes and edges
  37. var data = getScaleFreeNetwork(25);
  38. // create a network
  39. var container = document.getElementById('mynetwork');
  40. var options = {
  41. physics: {
  42. stabilization: false
  43. },
  44. configure: true
  45. };
  46. network = new vis.Network(container, data, options);
  47. network.on("configChange", function() {
  48. // this will immediately fix the height of the configuration
  49. // wrapper to prevent unecessary scrolls in chrome.
  50. // see https://github.com/almende/vis/issues/1568
  51. var div = container.getElementsByClassName('vis-configuration-wrapper')[0];
  52. div.style["height"] = div.getBoundingClientRect().height + "px";
  53. });
  54. }
  55. </script>
  56. </head>
  57. <body onload="draw();">
  58. <p>
  59. The configurator can be used to play with the options. In this example, all options that can be configured with this tool are shown.
  60. You can also supply a custom filter function or filter string. You can press the generate options button below to have an options object printed. You can then use
  61. this in the network.
  62. </p>
  63. <p><b>Note:</b> The configurator is recreated in the dom tree on input change. This may cause undesired scrolls in your application. In order to avoid this, explicitly set the height of the configurator (see this example's source code).
  64. </p>
  65. <br />
  66. <div id="mynetwork"></div>
  67. <p id="selection"></p>
  68. </body>
  69. </html>