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.

89 lines
3.6 KiB

  1. <!doctype html>
  2. <html>
  3. <head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script>
  4. <title>Network | Static smooth curves</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: 400px;
  10. height: 400px;
  11. border: 1px solid lightgray;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h2>Static smooth curves</h2>
  17. <div style="width:700px; font-size:14px; text-align: justify;">
  18. All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
  19. support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
  20. solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
  21. nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
  22. types. <br /> <br />
  23. Drag the nodes around each other to see how the smooth curves are drawn for each setting. For animated system, we
  24. recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
  25. that the direction (the from and to) of the curve matters.
  26. <br /> <br />
  27. </div>
  28. Smooth curve type:
  29. <select id="dropdownID">
  30. <option value="continuous" selected="selected">continuous</option>
  31. <option value="discrete">discrete</option>
  32. <option value="diagonalCross">diagonalCross</option>
  33. <option value="straightCross">straightCross</option>
  34. <option value="horizontal">horizontal</option>
  35. <option value="vertical">vertical</option>
  36. <option value="curvedCW">curvedCW</option>
  37. <option value="curvedCCW">curvedCCW</option>
  38. </select><br/>
  39. Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
  40. <div id="mynetwork"></div>
  41. <script type="text/javascript">
  42. var dropdown = document.getElementById("dropdownID");
  43. dropdown.onchange = update;
  44. var roundnessSlider = document.getElementById("roundnessSlider");
  45. roundnessSlider.onchange = update;
  46. var roundnessScreen = document.getElementById("roundnessScreen");
  47. // create an array with nodes
  48. var nodes = [
  49. {id: 1, label: 'Node 1'},
  50. {id: 2, label: 'Node 2', x:150, y:130, allowedToMoveX: true, allowedToMoveY: true}
  51. ];
  52. // create an array with edges
  53. var edges = [
  54. {from: 1, to: 2, style:"arrow"}
  55. ];
  56. // create a network
  57. var container = document.getElementById('mynetwork');
  58. var data = {
  59. nodes: nodes,
  60. edges: edges
  61. };
  62. var options = {physics:{barnesHut:{gravitationalConstant:0, springConstant:0, centralGravity: 0}},
  63. smoothCurves:{dynamic:false, type: '1'}};
  64. var network = new vis.Network(container, data, options);
  65. function update() {
  66. var type = dropdown.value;
  67. var roundness = roundnessSlider.value;
  68. roundnessScreen.value = roundness;
  69. var options = {smoothCurves:{type:type, roundness:roundness}}
  70. network.setOptions(options);
  71. }
  72. update();
  73. </script>
  74. </body>
  75. </html>