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.

213 lines
8.9 KiB

9 years ago
9 years ago
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <link rel="icon" HREF="favicon.ico">
  10. <title>vis.js - A dynamic, browser based visualization library.</title>
  11. <!-- Bootstrap core CSS -->
  12. <link href="../css/bootstrap.css" rel="stylesheet">
  13. <link href="../css/newdocs.css" rel="stylesheet">
  14. <link href="../css/prettify.css" type="text/css" rel="stylesheet" />
  15. <script type="text/javascript" src="../js/toggleTable.js"></script>
  16. <script type="text/javascript" src="../js/googleAnalytics.js"></script>
  17. <script type="text/javascript" src="../js/prettify/prettify.js"></script>
  18. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  19. <!--[if lt IE 9]>
  20. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  21. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  22. <![endif]-->
  23. <script src="../js/smooth-scroll.min.js"></script>
  24. <script language="JavaScript">
  25. smoothScroll.init();
  26. </script>
  27. </head>
  28. <!-- NAVBAR
  29. ================================================== -->
  30. <body onload="prettyPrint();">
  31. <div class="navbar-wrapper">
  32. <div class="container">
  33. <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  34. <div class="container">
  35. <div class="navbar-header">
  36. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
  37. aria-expanded="false" aria-controls="navbar">
  38. <span class="sr-only">Toggle navigation</span>
  39. <span class="icon-bar"></span>
  40. <span class="icon-bar"></span>
  41. <span class="icon-bar"></span>
  42. </button>
  43. <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
  44. </div>
  45. <div id="navbar" class="navbar-collapse collapse">
  46. <ul class="nav navbar-nav">
  47. <li><a href="../index.html#modules">Modules</a></li>
  48. <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
  49. src="../img/external-link-icons/external-link-icon-white.png"></a>
  50. </li>
  51. <li><a href="../blog.html">Blog</a></li>
  52. <li><a href="../index.html#download_install">Download</a></li>
  53. <li><a href="../showcase/index.html">Showcase</a></li>
  54. <li><a href="../index.html#contribute">Contribute</a></li>
  55. <li><a href="../featureRequests.html">Feature requests</a></li>
  56. <li><a href="../index.html#licenses">License</a></li>
  57. </ul>
  58. </div>
  59. </div>
  60. </nav>
  61. </div>
  62. </div>
  63. <a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img
  64. style="position: absolute; top: 0; right: 0; border: 0;"
  65. src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
  66. alt="Fork me on GitHub"
  67. data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
  68. <div class="container full">
  69. <h1>Network - canvas</h1>
  70. <p>Handles the HTML part of the canvas.</p>
  71. <h3>Options</h3>
  72. <p>The options for the canvas have to be contained in an object titled 'canvas'.</p>
  73. <p>Click on the options shown to show how these options are supposed to be used.</p>
  74. <ul class="nav nav-tabs">
  75. <li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
  76. <li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
  77. </ul>
  78. <br>
  79. <pre class="prettyprint lang-js options hidden" id="fullOptions">
  80. var options = {
  81. canvas:{
  82. width:'100%', // other format: '400px'
  83. height:'100%',
  84. autoResize: true
  85. }
  86. }
  87. network.setOptions(options);
  88. </pre>
  89. <p>All of the individual options are explained here:</p>
  90. <table class="moduleTable">
  91. <tr class="header">
  92. <td class="name">name</td>
  93. <td class="type">type</td>
  94. <td class="default">default</td>
  95. <td class="description">description</td>
  96. </tr>
  97. <tr>
  98. <td>width</td>
  99. <td class="mid">String</td>
  100. <td class="mid"><code>'100%'</code></td>
  101. <td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
  102. </tr>
  103. <tr>
  104. <td>height</td>
  105. <td class="mid">String</td>
  106. <td class="mid"><code>'100%'</code></td>
  107. <td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
  108. </tr>
  109. <tr>
  110. <td>autoResize</td>
  111. <td class="mid">Boolean</td>
  112. <td class="mid"><code>true</code></td>
  113. <td>If true, the Network will automatically detect when its container is resized, and redraw itself
  114. accordingly. If false, the Network can be forced to repaint after its container has been resized
  115. using the function redraw() and setSize().</td>
  116. </tr>
  117. </table>
  118. <h3>Methods</h3>
  119. <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the
  120. setOptions method of the network itself and use the module name as an object name.</p>
  121. <table class="moduleTable">
  122. <tr class="header">
  123. <td class="methodName">name</td>
  124. <td>returns</td>
  125. <td>description</td>
  126. </tr>
  127. <tr>
  128. <td>setSize(<br>&nbsp;&nbsp;&nbsp;<code><i>String width</i></code>,<br>&nbsp;&nbsp;&nbsp;<code><i>String
  129. height</i></code><br>)
  130. </td>
  131. <td class="mid">none</td>
  132. <td>Set the size of the canvas. This is automatically done on a window resize.</td>
  133. </tr>
  134. <tr>
  135. <td>canvasToDOM({<br>&nbsp;&nbsp;&nbsp;<code><i>x: Number</i></code>,<br>&nbsp;&nbsp;&nbsp;<code><i>y:
  136. Number</i></code><br>})
  137. </td>
  138. <td class="mid">Object</td>
  139. <td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of
  140. <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container.
  141. </td>
  142. </tr>
  143. <tr>
  144. <td>DOMtoCanvas({<br>&nbsp;&nbsp;&nbsp;<code><i>x: Number</i></code>,<br>&nbsp;&nbsp;&nbsp;<code><i>y:
  145. Number</i></code><br>})
  146. </td>
  147. <td class="mid">Object</td>
  148. <td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of
  149. <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container.
  150. </td>
  151. </tr>
  152. </table>
  153. <h3>Events</h3>
  154. <p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
  155. <table class="moduleTable">
  156. <tr class="header">
  157. <td class="eventName">name</td>
  158. <td class="eventProperties">properties</td>
  159. <td>description</td>
  160. </tr>
  161. <tr>
  162. <td>resize</td>
  163. <td class="mid">
  164. <pre class="code">
  165. {
  166. width: Number // the new width of the canvas
  167. height: Number // the new height of the canvas
  168. oldWidth: Number // the old width of the canvas
  169. oldHeight: Number // the old height of the canvas
  170. }
  171. </pre>
  172. <ul>
  173. </ul>
  174. </td>
  175. <td>Fired when the size of the canvas has been resized, either by a redraw call when the container div has
  176. changed in size, a setSize() call with new values or a setOptions() with new width and/or height values.
  177. </td>
  178. </tr>
  179. </table>
  180. <br/>
  181. <br/>
  182. <br/>
  183. <br/>
  184. <br/>
  185. <br/>
  186. <br/>
  187. </div>
  188. <!-- Bootstrap core JavaScript
  189. ================================================== -->
  190. <!-- Placed at the end of the document so the pages load faster -->
  191. <script src="../js/jquery.min.js"></script>
  192. <script src="../js/bootstrap.min.js"></script>
  193. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  194. <script src="../js/ie10-viewport-bug-workaround.js"></script>