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.

197 lines
3.9 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | DOT edge styles</title>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  6. <script src="../../../../dist/vis.js"></script>
  7. <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
  8. <style type="text/css">
  9. body, html {
  10. font: 10pt sans;
  11. line-height: 1.5em;;
  12. width: 100%;
  13. height: 100%;
  14. padding: 0;
  15. margin: 0;
  16. color: #4d4d4d;
  17. box-sizing: border-box;
  18. overflow: hidden;
  19. }
  20. #header {
  21. margin: 0;
  22. padding: 10px;
  23. box-sizing: border-box;
  24. }
  25. #contents {
  26. height: 100%;
  27. margin: 0;
  28. padding: 0;
  29. box-sizing: border-box;
  30. position: relative;
  31. }
  32. #left, #right {
  33. position: absolute;
  34. width: 50%;
  35. height: 100%;
  36. margin: 0;
  37. padding: 10px;
  38. box-sizing: border-box;
  39. display: inline-block;
  40. }
  41. #left {
  42. top: 0;
  43. left: 0;
  44. }
  45. #right {
  46. top: 0;
  47. right: 0;
  48. }
  49. #error {
  50. color: red;
  51. }
  52. #data {
  53. width: 100%;
  54. height: 100%;
  55. border: 1px solid #d3d3d3;
  56. box-sizing: border-box;
  57. resize: none;
  58. }
  59. #draw, #reset {
  60. padding: 5px 15px;
  61. }
  62. #mynetwork {
  63. width: 100%;
  64. height: 100%;
  65. border: 1px solid #d3d3d3;
  66. box-sizing: border-box;
  67. }
  68. a:hover {
  69. color: red;
  70. }
  71. </style>
  72. </head>
  73. <body>
  74. <div id="header">
  75. <h1>DOT edge styles</h1>
  76. <div>
  77. <p>
  78. Example of edge styles support
  79. </p>
  80. <ul>
  81. <li> label: text displayed on the edge</li>
  82. <li> color: edge color</li>
  83. <li> style: edge style is solid(default), dashed or dotted</li>
  84. </ul>
  85. </div>
  86. <div>
  87. <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
  88. <button id="reset" title="Reset the DOT graph">Reset</button>
  89. <span id="error"></span>
  90. </div>
  91. </div>
  92. <div id="contents">
  93. <div id="left">
  94. <textarea id="data">
  95. </textarea>
  96. </div>
  97. <div id="right">
  98. <div id="mynetwork"></div>
  99. </div>
  100. </div>
  101. <script type="text/javascript">
  102. var dotDefault = "digraph {\n" +
  103. " Parent -> C1[label=\"default\"]; // Default style is solid \n" +
  104. " Parent -> C2[label=\"solid pink\", color=\"pink\"];\n" +
  105. " Parent -> C3[label=\"dashed green\", style=\"dashed\", color=\"green\"];\n" +
  106. " Parent -> C4[label=\"dotted purple\", style=\"dotted\", color=\"purple\"];\n" +
  107. "}";
  108. // create a network
  109. var container = document.getElementById('mynetwork');
  110. var options = {
  111. physics: {
  112. stabilization: false,
  113. barnesHut: {
  114. springLength: 200
  115. }
  116. }
  117. };
  118. var data = {};
  119. var network = new vis.Network(container, data, options);
  120. $('#draw').click(draw);
  121. $('#reset').click(reset);
  122. $(window).resize(resize);
  123. $(window).load(draw);
  124. $('#data').keydown(function (event) {
  125. if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
  126. draw();
  127. event.stopPropagation();
  128. event.preventDefault();
  129. }
  130. });
  131. function resize() {
  132. $('#contents').height($('body').height() - $('#header').height() - 30);
  133. }
  134. function draw () {
  135. try {
  136. resize();
  137. $('#error').html('');
  138. // Provide a string with data in DOT language
  139. data = vis.network.convertDot($('#data').val());
  140. network.setData(data);
  141. }
  142. catch (err) {
  143. // set the cursor at the position where the error occurred
  144. var match = /\(char (.*)\)/.exec(err);
  145. if (match) {
  146. var pos = Number(match[1]);
  147. var textarea = $('#data')[0];
  148. if(textarea.setSelectionRange) {
  149. textarea.focus();
  150. textarea.setSelectionRange(pos, pos);
  151. }
  152. }
  153. // show an error message
  154. $('#error').html(err.toString());
  155. }
  156. }
  157. function reset() {
  158. $('#data').val(dotDefault);
  159. draw();
  160. }
  161. window.onload = function() {
  162. reset();
  163. }
  164. </script>
  165. </body>
  166. </html>