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.

147 lines
3.9 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="tools"><button onclick="addNodeFunc();">Add node</button></div>
  20. <div id="mynetwork"></div>
  21. <script type="text/javascript">
  22. // create an array with nodes
  23. var network = null;
  24. var nodes = null;
  25. var edges = null;
  26. var _counter = 0;
  27. var initTest = function() {
  28. console.log('initialized...');
  29. var test = document.getElementById('mynetwork');
  30. nodes = new vis.DataSet([
  31. {id: 1, label: 'Node 1'},
  32. {id: 2, label: 'Node 2'},
  33. {id: 3, label: 'Node 3'},
  34. {id: 4, label: 'Node 4'},
  35. {id: 5, label: 'Node 5'}
  36. ]);
  37. // create an array with edges
  38. edges = new vis.DataSet([
  39. {from: 1, to: 3},
  40. {from: 1, to: 2},
  41. {from: 2, to: 4},
  42. {from: 2, to: 5}
  43. ]);
  44. var data = {
  45. nodes: nodes,
  46. edges: edges
  47. };
  48. var config = {
  49. locale: 'pl',
  50. edges: {
  51. labelHighlightBold: false,
  52. smooth: {type: 'horizontal'},
  53. arrows: {
  54. to: {enabled: true, scaleFactor: 0.5}
  55. },
  56. font: {
  57. color: 'black',
  58. strokeColor: 'white',
  59. size: 11,
  60. face: 'tahoma',
  61. strokeWidth: 2,
  62. align: 'top'
  63. },
  64. color: {
  65. highlight: '#EDB100'
  66. }
  67. },
  68. nodes: {
  69. borderWidth: 1,
  70. shape: 'box',
  71. shapeProperties: {borderRadius: 3},
  72. color: {
  73. border: '#C10600',
  74. background: '#600300',
  75. highlight: {
  76. border: '#EDB100',
  77. background: '#A57400'
  78. }
  79. },
  80. font: '11px tahoma white',
  81. scaling: {
  82. min: 2,
  83. max: 1,
  84. label: {enabled: false}
  85. }
  86. },
  87. manipulation: {
  88. enabled: false,
  89. initiallyActive: false,
  90. deleteEdge: false,
  91. controlNodeStyle: {
  92. fixed: true,
  93. color: {
  94. border: '#000C7C',
  95. background: '#7280FF'
  96. }
  97. }
  98. },
  99. interaction: {
  100. zoomView: false,
  101. selectConnectedEdges: false
  102. },
  103. physics: {
  104. enabled: false, //propably this is problem, on true is ok o.o
  105. adaptiveTimestep: false,
  106. stabilization: {
  107. enabled: true,
  108. updateInterval: 10
  109. },
  110. barnesHut: {
  111. gravitationalConstant: -20000,
  112. centralGravity: 0.25,
  113. springLength: 50
  114. }
  115. }
  116. };
  117. network = new vis.Network(test, data, config);
  118. _nodes = new vis.DataSet();
  119. _triples = new vis.DataSet();
  120. };
  121. var addNodeFunc = function() {
  122. var pos = network.getViewPosition();
  123. console.log(pos);
  124. nodes.add(
  125. {
  126. x: pos.x,
  127. y: pos.y
  128. });
  129. };
  130. initTest()
  131. </script>
  132. </body>
  133. </html>