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.

1157 lines
52 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <meta name="description" content="">
  9. <meta name="author" content="">
  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. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  15. <!--[if lt IE 9]>
  16. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  17. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  18. <![endif]-->
  19. <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
  20. <script type="text/javascript" src="../js/googleAnalytics.js"></script>
  21. <script type="text/javascript" src="../js/prettify/prettify.js"></script>
  22. <script src="../js/smooth-scroll.min.js"></script>
  23. <script language="JavaScript">
  24. smoothScroll.init();
  25. </script>
  26. <style>
  27. tr.evenRow {
  28. background-color: #e6eff5;
  29. }
  30. tr.evenRow code {
  31. background-color: #b3d2e6;
  32. color: #282f33;
  33. }
  34. tr.evenRow pre {
  35. background-color: #b3d2e6;
  36. color: #282f33;
  37. }
  38. tr.subHeader {
  39. font-weight: bold;
  40. font-style: italic;
  41. }
  42. tr.subHeader td {
  43. padding-top: 30px;
  44. }
  45. td.mid {
  46. width: 150px;
  47. background-color: #ffffff;
  48. border: 1px solid #dddddd;
  49. }
  50. tr.visible td {
  51. padding: 10px;
  52. }
  53. </style>
  54. <script type="text/javascript" src="../js/toggleTable.js"></script>
  55. </head>
  56. <body onload="prettyPrint();">
  57. <!-- NAVBAR
  58. ================================================== -->
  59. <div class="navbar-wrapper">
  60. <div class="container">
  61. <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  62. <div class="container">
  63. <div class="navbar-header">
  64. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
  65. aria-expanded="false" aria-controls="navbar">
  66. <span class="sr-only">Toggle navigation</span>
  67. <span class="icon-bar"></span>
  68. <span class="icon-bar"></span>
  69. <span class="icon-bar"></span>
  70. </button>
  71. <a class="navbar-brand hidden-sm" href="http://www.visjs.org/index.html">vis.js</a>
  72. </div>
  73. <div id="navbar" class="navbar-collapse collapse">
  74. <ul class="nav navbar-nav">
  75. <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
  76. <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
  77. src="../img/external-link-icons/external-link-icon-white.png"></a>
  78. </li>
  79. <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
  80. <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
  81. <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
  82. <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
  83. <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
  84. <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
  85. </ul>
  86. </div>
  87. </div>
  88. </nav>
  89. </div>
  90. </div>
  91. <a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img
  92. style="position: absolute; top: 0; right: 0; border: 0;"
  93. src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
  94. alt="Fork me on GitHub"
  95. data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
  96. <div class="container full">
  97. <h1>Network</h1>
  98. <p>As of 4.0, the network consists of individual modules which handle specific parts of the network. These modules
  99. have their own docs, options, methods and events which you can access
  100. by clicking on the modules in the list below.</p>
  101. <h3>Modules</h3>
  102. <table class="moduleTable">
  103. <tr>
  104. <td width="120px"><a href="./configure.html">configure</a></td>
  105. <td>Generates an interactive option editor with filtering.</td>
  106. </tr>
  107. <tr>
  108. <td><a href="./edges.html">edges</a></td>
  109. <td>Handles the creation and deletion of edges and contains the global edge options and styles.</td>
  110. </tr>
  111. <tr>
  112. <td><a href="./groups.html">groups</a></td>
  113. <td>Contains the groups and some options on how to handle nodes with non-existing groups.</td>
  114. </tr>
  115. <tr>
  116. <td><a href="./interaction.html">interaction</a></td>
  117. <td>Used for all user interaction with the network. Handles mouse and touch events and selection as well as
  118. the navigation
  119. buttons and the popups.
  120. </td>
  121. </tr>
  122. <tr>
  123. <td><a href="./layout.html">layout</a></td>
  124. <td>Governs the initial and hierarchical positioning.</td>
  125. </tr>
  126. <tr>
  127. <td><a href="./manipulation.html">manipulation</a></td>
  128. <td>Supplies an API and optional GUI to alter the data in the network.</td>
  129. </tr>
  130. <tr>
  131. <td><a href="./nodes.html">nodes</a></td>
  132. <td>Handles the creation and deletion of nodes and contains the global node options and styles.</td>
  133. </tr>
  134. <tr>
  135. <td><a href="./physics.html">physics</a></td>
  136. <td>Does all the simulation moving the nodes and edges to their final positions, also governs
  137. stabilization.
  138. </td>
  139. </tr>
  140. </table>
  141. <h3>Options</h3>
  142. <p>Click on the options shown to show how these options are supposed to be used.</p>
  143. <br>
  144. <pre class="prettyprint lang-js options">
  145. var options = {
  146. autoResize: true,
  147. height: '100%',
  148. width: '100%'
  149. locale: 'en',
  150. locales: locales,
  151. clickToUse: false,
  152. configure: {...}, // defined in the configure module.
  153. edges: {...}, // defined in the edges module.
  154. nodes: {...}, // defined in the nodes module.
  155. groups: {...}, // defined in the groups module.
  156. layout: {...}, // defined in the layout module.
  157. interaction: {...}, // defined in the interaction module.
  158. manipulation: {...}, // defined in the manipulation module.
  159. physics: {...}, // defined in the physics module.
  160. }
  161. network.setOptions(options);
  162. </pre>
  163. <p>The individual options are explained below. The ones referring to modules are explained in the corresponding
  164. module.</p>
  165. <table class="moduleTable">
  166. <tr class="header">
  167. <td>name</td>
  168. <td>type</td>
  169. <td>default</td>
  170. <td>description</td>
  171. </tr>
  172. <tr>
  173. <td>autoResize</td>
  174. <td class="mid">Boolean</td>
  175. <td class="mid"><code>true</code></td>
  176. <td>If true, the Network will automatically detect when its container is resized, and redraw itself
  177. accordingly. If false, the Network can be forced to repaint after its container has been resized
  178. using the function redraw() and setSize().
  179. </td>
  180. </tr>
  181. <tr>
  182. <td>width</td>
  183. <td class="mid">String</td>
  184. <td class="mid"><code>'100%'</code></td>
  185. <td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
  186. </tr>
  187. <tr>
  188. <td>height</td>
  189. <td class="mid">String</td>
  190. <td class="mid"><code>'100%'</code></td>
  191. <td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
  192. </tr>
  193. <tr>
  194. <td>locale</td>
  195. <td class="mid">String</td>
  196. <td class="mid"><code>'en'</code></td>
  197. <td>Select the locale. By default, the language is English. If you want to use another language, you will
  198. need to define your own locale and refer to it here.
  199. </td>
  200. </tr>
  201. <tr>
  202. <td>locales</td>
  203. <td class="mid">Object</td>
  204. <td class="mid">defaultLocales</td>
  205. <td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look at
  206. the <a href="#locales" data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }">locales
  207. section below</a> for more explaination on how to customize this.
  208. </td>
  209. </tr>
  210. <tr>
  211. <td>clickToUse</td>
  212. <td class="mid">Boolean</td>
  213. <td class="mid">false</td>
  214. <td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look at
  215. the <a href="#locales" data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }">locales
  216. section below</a> for more explaination on how to customize this.
  217. </td>
  218. </tr>
  219. </table>
  220. <br>
  221. <br>
  222. <h3>All Methods</h3>
  223. <p>This is a list of all the methods in the public API. They have been grouped by category, which correspond to the
  224. modules listed above.</p>
  225. <table class="moduleTable" id="methodTable">
  226. <tr class="subHeader">
  227. <td colspan="2">Global methods for the network.</td>
  228. </tr>
  229. <tr class="collapsible toggle" onclick="toggleTable('methodTable','destroy', this);">
  230. <td colspan="2"><span parent="destroy" class="right-caret"></span> destroy()</td>
  231. </tr>
  232. <tr class="hidden" parent="destroy">
  233. <td class="mid">Returns: none</td>
  234. <td>Remove the network from the DOM and remove all Hammer bindings and references.</td>
  235. </tr>
  236. <tr class="collapsible toggle" onclick="toggleTable('methodTable','setData', this);">
  237. <td colspan="2"><span parent="setData" class="right-caret"></span> setData({<code><i>nodes: vis
  238. DataSet/Array</i></code>,<code><i>edges: vis
  239. DataSet/Array</i></code>})
  240. </td>
  241. </tr>
  242. <tr class="hidden" parent="setData">
  243. <td class="mid">Returns: none</td>
  244. <td>Override all the data in the network. If stabilization is enabled in the <a href="physics.html">physics
  245. module</a>, the network will stabilize again. This method is also performed when first initializing the
  246. network.
  247. </td>
  248. </tr>
  249. <tr class="collapsible toggle" onclick="toggleTable('methodTable','setOptions', this);">
  250. <td colspan="2"><span parent="setOptions" class="right-caret"></span> setOptions(<code>Object options</code>)
  251. </td>
  252. </tr>
  253. <tr class="hidden" parent="setOptions">
  254. <td class="mid">Returns: none</td>
  255. <td>Set the options. All available options can be found in the modules above. Each module requires it's own
  256. container with the module name to contain its options.
  257. </td>
  258. </tr>
  259. <tr class="subHeader">
  260. <td colspan="2">Methods related to the canvas.</td>
  261. </tr>
  262. <tr class="collapsible toggle" onclick="toggleTable('methodTable','canvasToDOM', this);">
  263. <td colspan="2"><span parent="canvasToDOM" class="right-caret"></span> canvasToDOM({<code><i>x:
  264. Number</i></code>,<code><i>y:
  265. Number</i></code>})
  266. </td>
  267. </tr>
  268. <tr class="hidden" parent="canvasToDOM">
  269. <td class="mid">Returns: Object</td>
  270. <td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of
  271. <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container.
  272. </td>
  273. </tr>
  274. <tr class="collapsible toggle" onclick="toggleTable('methodTable','DOMtoCanvas', this);">
  275. <td colspan="2"><span parent="DOMtoCanvas" class="right-caret"></span> DOMtoCanvas({<code><i>x:
  276. Number</i></code>,<code><i>y:
  277. Number</i></code>})
  278. </td>
  279. </tr>
  280. <tr class="hidden" parent="DOMtoCanvas">
  281. <td class="mid">Returns: Object</td>
  282. <td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of
  283. <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container.
  284. </td>
  285. </tr>
  286. <tr class="collapsible toggle" onclick="toggleTable('methodTable','redraw', this);">
  287. <td colspan="2"><span parent="redraw" class="right-caret"></span> redraw()</td>
  288. </tr>
  289. <tr class="hidden" parent="redraw">
  290. <td class="mid">Returns: none</td>
  291. <td>Redraw the network.</td>
  292. </tr>
  293. <tr class="collapsible toggle" onclick="toggleTable('methodTable','setSize', this);">
  294. <td colspan="2"><span parent="setSize" class="right-caret"></span> setSize(<code><i>String width</i></code>,<code><i>String
  295. height</i></code>)
  296. </td>
  297. </tr>
  298. <tr class="hidden" parent="setSize">
  299. <td class="mid">Returns: none</td>
  300. <td>Set the size of the canvas. This is automatically done on a window resize.</td>
  301. </tr>
  302. <tr class="subHeader">
  303. <td colspan="2">Clustering</td>
  304. </tr>
  305. <tr class="collapsible toggle" onclick="toggleTable('methodTable','cluster', this);">
  306. <td colspan="2"><span parent="cluster" class="right-caret"></span> cluster(
  307. <code>Object options</code>)
  308. </td>
  309. </tr>
  310. <tr class="hidden" parent="cluster">
  311. <td class="mid">Returns: none</td>
  312. <td>The options object is explained in full <a data-scroll=""
  313. data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }"
  314. href="#optionsObject">below</a>. The joinCondition function
  315. is presented with all nodes.
  316. </td>
  317. </tr>
  318. <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByConnection', this);">
  319. <td colspan="2"><span parent="clusterByConnection" class="right-caret"></span> clusterByConnection(
  320. <code>String nodeId</code>,
  321. <code>[Object options]</code>
  322. )
  323. </td>
  324. </tr>
  325. <tr class="hidden" parent="clusterByConnection">
  326. <td class="mid">Returns: none</td>
  327. <td>This method looks at the provided node and makes a cluster of it and all it's connected nodes. The
  328. behaviour can be customized by proving the options object. All options of this object are explained <a
  329. data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }"
  330. href="#optionsObject">below</a>. The joinCondition is only presented with the connected nodes.
  331. </td>
  332. </tr>
  333. <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);">
  334. <td colspan="2"><span parent="clusterByHubsize" class="right-caret"></span> clusterByHubsize(
  335. <code>Number hubsize</code>,
  336. <code>[Object options]</code>)
  337. </td>
  338. </tr>
  339. <tr class="hidden" parent="clusterByHubsize">
  340. <td class="mid">Returns: none</td>
  341. <td>This method checks all nodes in the network and those with a equal or higher amount of edges than
  342. specified with the <code>hubsize</code> qualify. Cluster by connection is performed on each of them. The
  343. options object is described for <code>clusterByConnection</code> and does the same here.
  344. </td>
  345. </tr>
  346. <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterOutliers', this);">
  347. <td colspan="2"><span parent="clusterOutliers" class="right-caret"></span> clusterOutliers(
  348. <code>[Object options]</code>)
  349. </tr>
  350. <tr class="hidden" parent="clusterOutliers">
  351. <td class="mid">Returns: none</td>
  352. <td>This method will cluster all nodes with 1 edge with their respective connected node.</td>
  353. </tr>
  354. <tr class="collapsible toggle" onclick="toggleTable('methodTable','findNode', this);">
  355. <td colspan="2"><span parent="findNode" class="right-caret"></span> findNode(
  356. <code>String nodeId</code>)
  357. </tr>
  358. <tr class="hidden" parent="findNode">
  359. <td class="mid">Returns: Array</td>
  360. <td>Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds
  361. showing where the node is. <br><br> Example:
  362. cluster 'A' contains cluster 'B',
  363. cluster 'B' contains cluster 'C',
  364. cluster 'C' contains node 'fred'.
  365. <code>network.clustering.findNode('fred')</code> will return <code>['A','B','C','fred']</code>.
  366. </td>
  367. </tr>
  368. <tr class="collapsible toggle" onclick="toggleTable('methodTable','isCluster', this);">
  369. <td colspan="2"><span parent="isCluster" class="right-caret"></span> isCluster(
  370. <code>String nodeId</code>)
  371. </tr>
  372. <tr class="hidden" parent="isCluster">
  373. <td class="mid">Returns: Boolean</td>
  374. <td>Returns true if the node whose ID has been supplied is a cluster.</td>
  375. </tr>
  376. <tr class="collapsible toggle" onclick="toggleTable('methodTable','openCluster', this);">
  377. <td colspan="2"><span parent="openCluster" class="right-caret"></span> openCluster(
  378. <code>String nodeId</code>)
  379. </tr>
  380. <tr class="hidden" parent="openCluster">
  381. <td class="mid">Returns: none</td>
  382. <td>Opens the cluster, releases the contained nodes and edges, removing the cluster node and cluster
  383. edges.
  384. </td>
  385. </tr>
  386. <tr class="subHeader">
  387. <td colspan="2">Layout</td>
  388. </tr>
  389. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSeed', this);">
  390. <td colspan="2"><span parent="getSeed" class="right-caret"></span> getSeed()</td>
  391. </tr>
  392. <tr class="hidden" parent="clusterByHubsize">
  393. </tr>
  394. <tr class="hidden" parent="getSeed">
  395. <td class="mid">Returns: Number</td>
  396. <td>If you like the layout of your network and would like it to start in the same way next time, ask for the
  397. seed using this method and put it in the <code>layout.randomSeed</code> option.
  398. </td>
  399. </tr>
  400. <tr class="subHeader">
  401. <td colspan="2">Manipulation methods to use the manipulation system without GUI.</td>
  402. </tr>
  403. <tr class="collapsible toggle" onclick="toggleTable('methodTable','enableEditMode', this);">
  404. <td colspan="2"><span parent="enableEditMode" class="right-caret"></span> enableEditMode()</td>
  405. </tr>
  406. <tr class="hidden" parent="enableEditMode">
  407. <td class="mid">Returns: none</td>
  408. <td>Programatically enable the edit mode. Similar effect to pressing the edit button.</td>
  409. </tr>
  410. <tr class="collapsible toggle" onclick="toggleTable('methodTable','disableEditMode', this);">
  411. <td colspan="2"><span parent="disableEditMode" class="right-caret"></span> disableEditMode()</td>
  412. </tr>
  413. <tr class="hidden" parent="disableEditMode">
  414. <td class="mid">Returns: none</td>
  415. <td>Programatically disable the edit mode. Similar effect to pressing the close icon (small cross in the
  416. corner of the toolbar).
  417. </td>
  418. </tr>
  419. <tr class="collapsible toggle" onclick="toggleTable('methodTable','addNodeMode', this);">
  420. <td colspan="2"><span parent="addNodeMode" class="right-caret"></span> addNodeMode()</td>
  421. </tr>
  422. <tr class="hidden" parent="addNodeMode">
  423. <td class="mid">Returns: none</td>
  424. <td>Go into addNode mode. Having edit mode or manipulation enabled is not required. To get out of this mode,
  425. call <code>disableEditMode()</code>. The callback functions defined in <code>handlerFunctions</code>
  426. still apply. To use these methods without having the manipulation GUI, make sure you set
  427. <code>enabled</code> to false.
  428. </td>
  429. </tr>
  430. <tr class="collapsible toggle" onclick="toggleTable('methodTable','editNodeMode', this);">
  431. <td colspan="2"><span parent="editNodeMode" class="right-caret"></span> editNodeMode()</td>
  432. </tr>
  433. <tr class="hidden" parent="editNodeMode">
  434. <td class="mid">Returns: none</td>
  435. <td>Go into editNode mode. The explaination from <code>addNodeMode</code> applies here as well.</td>
  436. </tr>
  437. <tr class="collapsible toggle" onclick="toggleTable('methodTable','addEdgeMode', this);">
  438. <td colspan="2"><span parent="addEdgeMode" class="right-caret"></span> addEdgeMode()</td>
  439. </tr>
  440. <tr class="hidden" parent="addEdgeMode">
  441. <td class="mid">Returns: none</td>
  442. <td>Go into addEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td>
  443. </tr>
  444. <tr class="collapsible toggle" onclick="toggleTable('methodTable','editEdgeMode', this);">
  445. <td colspan="2"><span parent="editEdgeMode" class="right-caret"></span> editEdgeMode()</td>
  446. </tr>
  447. <tr class="hidden" parent="editEdgeMode">
  448. <td class="mid">Returns: none</td>
  449. <td>Go into editEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td>
  450. </tr>
  451. <tr class="collapsible toggle" onclick="toggleTable('methodTable','deleteSelected', this);">
  452. <td colspan="2"><span parent="deleteSelected" class="right-caret"></span> deleteSelected()</td>
  453. </tr>
  454. <tr class="hidden" parent="deleteSelected">
  455. <td class="mid">Returns: none</td>
  456. <td>Delete selected. Having edit mode or manipulation enabled is not required.</td>
  457. </tr>
  458. <tr class="subHeader">
  459. <td colspan="2">Methods to get information on nodes.</td>
  460. </tr>
  461. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getPositions', this);">
  462. <td colspan="2"><span parent="getPositions" class="right-caret"></span> getPositions(<code><i>[Array of
  463. nodeIds]</i></code>)
  464. </td>
  465. </tr>
  466. <tr class="hidden" parent="getPositions">
  467. <td class="mid">Returns: Object</td>
  468. <td>Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object:
  469. <pre class="code">
  470. {
  471. nodeId1: {x: xValue, y:yValue},
  472. nodeId2: {x: xValue, y:yValue},
  473. ...
  474. }
  475. </pre>
  476. Alternative inputs are a String containing a nodeId or nothing. When a String is supplied, the position
  477. of the node corresponding to the ID is returned. When nothing is supplied, the positions of all nodes
  478. are returned.
  479. </td>
  480. </tr>
  481. <tr class="collapsible toggle" onclick="toggleTable('methodTable','storePositions', this);">
  482. <td colspan="2"><span parent="storePositions" class="right-caret"></span> storePositions()</td>
  483. </tr>
  484. <tr class="hidden" parent="storePositions">
  485. <td class="mid">Returns: none</td>
  486. <td>When using the vis.DataSet to load your nodes into the network, this method will put the X and Y
  487. positions of all nodes into that dataset. If you're loading your nodes from a database and have
  488. this dynamically coupled with
  489. the DataSet, you can
  490. use this to stablize your network once, then save the positions in that database through the DataSet so
  491. the next
  492. time you load the nodes, stabilization will be near instantaneous.
  493. <br><br>
  494. If the nodes are still moving and you're using dynamic smooth edges (which is on by default), you can
  495. use the option <code>stabilization.onlyDynamicEdges</code> in the <a href="physics.html">physics
  496. module</a>
  497. to improve initialization time.
  498. <br><br>
  499. <b>This method does not support clustering. At the moment it is not possible to cache
  500. positions when using clusters since they cannot be correctly initialized from just the
  501. positions.</b>
  502. </td>
  503. </tr>
  504. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBoundingBox', this);">
  505. <td colspan="2"><span parent="getBoundingBox" class="right-caret"></span> getBoundingBox(<code><i>String
  506. nodeId</i></code>)
  507. </td>
  508. </tr>
  509. <tr class="hidden" parent="getBoundingBox">
  510. <td class="mid">Returns: Object</td>
  511. <td> Returns a bounding box for the node including label in the format:
  512. <pre class="code">
  513. {
  514. top: Number,
  515. left: Number,
  516. right: Number,
  517. bottom: Number
  518. }
  519. </pre>
  520. These values are in canvas space.
  521. </td>
  522. </tr>
  523. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedNodes', this);">
  524. <td colspan="2"><span parent="getConnectedNodes" class="right-caret"></span> getConnectedNodes(<code><i>String
  525. nodeId</i></code>)
  526. </td>
  527. </tr>
  528. <tr class="hidden" parent="getConnectedNodes">
  529. <td class="mid">Returns: Array</td>
  530. <td>Returns an array of nodeIds of the all the nodes that are directly connected to this node.</td>
  531. </tr>
  532. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getEdges', this);">
  533. <td colspan="2"><span parent="getEdges" class="right-caret"></span> getEdges(<code><i>String
  534. nodeId</i></code>)
  535. </td>
  536. </tr>
  537. <tr class="hidden" parent="getEdges">
  538. <td class="mid">Returns: Array</td>
  539. <td>Returns an array of edgeIds of the edges connected to this node.</td>
  540. </tr>
  541. <tr class="subHeader">
  542. <td colspan="2">Physics methods to control when the simulation should run.</td>
  543. </tr>
  544. <tr class="collapsible toggle" onclick="toggleTable('methodTable','startSimulation', this);">
  545. <td colspan="2"><span parent="startSimulation" class="right-caret"></span> startSimulation()</td>
  546. </tr>
  547. <tr class="hidden" parent="startSimulation">
  548. <td class="mid">Returns: none</td>
  549. <td>Start the physics simulation. This is normally done whenever needed and is only really useful if you
  550. stop the simulation yourself and wish to continue it afterwards.
  551. </td>
  552. .</td></tr>
  553. <tr class="collapsible toggle" onclick="toggleTable('methodTable','stopSimulation', this);">
  554. <td colspan="2"><span parent="stopSimulation" class="right-caret"></span> stopSimulation()</td>
  555. </tr>
  556. <tr class="hidden" parent="stopSimulation">
  557. <td class="mid">Returns: none</td>
  558. <td>This stops the physics simulation and triggers a <code>stabilized</code> event. It can be restarted by
  559. dragging a node, altering the dataset or calling <code>startSimulation()</code>.
  560. </td>
  561. </tr>
  562. <tr class="collapsible toggle" onclick="toggleTable('methodTable','stabilize', this);">
  563. <td colspan="2"><span parent="stabilize" class="right-caret"></span> stabilize()</td>
  564. </tr>
  565. <tr class="hidden" parent="stabilize">
  566. <td class="mid">Returns: none</td>
  567. <td>You can manually call stabilize at any time. All the stabilization options above are used.</td>
  568. </tr>
  569. <tr class="subHeader">
  570. <td colspan="2">Selection methods for nodes and edges.</td>
  571. </tr>
  572. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelection', this);">
  573. <td colspan="2"><span parent="getSelection" class="right-caret"></span> getSelection()</td>
  574. </tr>
  575. <tr class="hidden" parent="getSelection">
  576. <td class="mid">Returns: Object</td>
  577. <td>Returns an object with selected nodes and edges ids like this:
  578. <pre class="code">
  579. {
  580. nodes: [Array of selected nodeIds],
  581. edges: [Array of selected edgeIds]
  582. }</pre>
  583. </td>
  584. </tr>
  585. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedNodes', this);">
  586. <td colspan="2"><span parent="getSelectedNodes" class="right-caret"></span> getSelectedNodes()</td>
  587. </tr>
  588. <tr class="hidden" parent="getSelectedNodes">
  589. <td class="mid">Returns: Array</td>
  590. <td>Returns an array of selected node ids like so:
  591. <code>[nodeId1, nodeId2, ..]</code>.
  592. </td>
  593. </tr>
  594. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedEdges', this);">
  595. <td colspan="2"><span parent="getSelectedEdges" class="right-caret"></span> getSelectedEdges()</td>
  596. </tr>
  597. <tr class="hidden" parent="getSelectedEdges">
  598. <td class="mid">Returns: Array</td>
  599. <td>Returns an array of selected edge ids like so: <code>[edgeId1, edgeId2, ..]</code>.</td>
  600. </tr>
  601. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodeAt', this);">
  602. <td colspan="2"><span parent="getNodeAt" class="right-caret"></span> getNodeAt(<code><i>{x: xPosition
  603. DOM, y: yPosition DOM}</i></code>)
  604. </td>
  605. </tr>
  606. <tr class="hidden" parent="getNodeAt">
  607. <td class="mid">Returns: String</td>
  608. <td>Returns a nodeId or undefined. The DOM positions are expected to be in pixels from the top left corner
  609. of the canvas.
  610. </td>
  611. </tr>
  612. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getEdgeAt', this);">
  613. <td colspan="2"><span parent="getEdgeAt" class="right-caret"></span> getEdgeAt(<code><i>{x: xPosition
  614. DOM, y: yPosition DOM}</i></code>)
  615. </td>
  616. </tr>
  617. <tr class="hidden" parent="getEdgeAt">
  618. <td class="mid">Returns: String</code></td>
  619. <td>Returns a edgeId or undefined. The DOM positions are expected to be in pixels from the top left corner
  620. of the canvas..
  621. </td>
  622. </tr>
  623. <tr class="collapsible toggle" onclick="toggleTable('methodTable','selectNodes', this);">
  624. <td colspan="2"><span parent="selectNodes" class="right-caret"></span> selectNodes(<code><i>Array with
  625. nodeIds</i></code>,<code><i>[Boolean
  626. highlightEdges]</i></code>)
  627. </td>
  628. </tr>
  629. <tr class="hidden" parent="selectNodes">
  630. <td class="mid">Returns: none</td>
  631. <td>Selects the nodes corresponding to the id's in the input array. If highlightEdges is true or undefined,
  632. the neighbouring edges will also be selected. This method unselects all other objects before selecting
  633. its own objects. <i>Does not fire events</i>.
  634. </td>
  635. </tr>
  636. <tr class="collapsible toggle" onclick="toggleTable('methodTable','selectEdges', this);">
  637. <td colspan="2"><span parent="selectEdges" class="right-caret"></span> selectEdges(<code><i>Array with
  638. edgeIds</i></code>)
  639. </td>
  640. </tr>
  641. <tr class="hidden" parent="selectEdges">
  642. <td class="mid">Returns: none</td>
  643. <td>Selects the edges corresponding to the id's in the input array. This method unselects all other objects
  644. before selecting its own objects. <i>Does not fire events</i>.
  645. </td>
  646. </tr>
  647. <tr class="collapsible toggle" onclick="toggleTable('methodTable','unselectAll', this);">
  648. <td colspan="2"><span parent="unselectAll" class="right-caret"></span> unselectAll()</td>
  649. </tr>
  650. <tr class="hidden" parent="unselectAll">
  651. <td class="mid">Returns: none</td>
  652. <td>Unselect all objects. <i>Does not fire events</i>.</td>
  653. </tr>
  654. <tr class="subHeader">
  655. <td colspan="2">Methods to control the viewport for zoom and animation.</td>
  656. </tr>
  657. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getScale', this);">
  658. <td colspan="2"><span parent="getScale" class="right-caret"></span> getScale()</td>
  659. </tr>
  660. <tr class="hidden" parent="getScale">
  661. <td class="mid">Returns: Number</td>
  662. <td>Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.</td>
  663. </tr>
  664. <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);">
  665. <td colspan="2"><span parent="clusterByHubsize" class="right-caret"></span> getPosition()</td>
  666. </tr>
  667. <tr class="hidden" parent="clusterByHubsize">
  668. <td class="mid">Returns: Number</td>
  669. <td>Returns the current central focus point of the camera.</td>
  670. </tr>
  671. <tr class="collapsible toggle" onclick="toggleTable('methodTable','fit', this);">
  672. <td colspan="2"><span parent="fit" class="right-caret"></span> fit(<code>[Object
  673. options]</code>)
  674. </td>
  675. </tr>
  676. <tr class="hidden" parent="fit">
  677. <td class="mid">Returns: none</td>
  678. <td>Zooms out so all nodes fit on the canvas. You can supply options to customize this:
  679. <pre class="code">
  680. {
  681. nodes:[Array of nodeIds],
  682. animation: { // -------------------> can be a boolean too!
  683. duration: Number
  684. easingFunction: String
  685. }
  686. }
  687. </pre>
  688. The nodes can be used to zoom to fit only specific nodes in the view. <br/><br/>
  689. The other options are explained in the <code>moveTo()</code> description below.
  690. All options are optional for the fit method.
  691. </td>
  692. </tr>
  693. <tr class="collapsible toggle" onclick="toggleTable('methodTable','focus', this);">
  694. <td colspan="2"><span parent="focus" class="right-caret"></span> focus(
  695. <code>String nodeId</code>,
  696. <code>[Object options]</code>)
  697. </td>
  698. </tr>
  699. <tr class="hidden" parent="focus">
  700. <td class="mid">Returns: none</td>
  701. <td>You can focus on a node with this function. What that means is the view will lock onto that node, if it
  702. is moving, the view will also move accordingly. If the view is dragged by the user, the focus is broken.
  703. You can supply options to customize the effect:
  704. <pre class="code">
  705. {
  706. scale: Number,
  707. offset: {x:Number, y:Number}
  708. locked: boolean
  709. animation: { // -------------------> can be a boolean too!
  710. duration: Number
  711. easingFunction: String
  712. }
  713. }
  714. </pre>
  715. All options except for locked are explained in the <code>moveTo()</code> description below. Locked
  716. denotes whether or not the view remains locked to the node once the zoom-in animation is finished.
  717. Default value is true. The options object is optional in the focus method.
  718. </td>
  719. </tr>
  720. <tr class="collapsible toggle" onclick="toggleTable('methodTable','moveTo', this);">
  721. <td colspan="2"><span parent="moveTo" class="right-caret"></span> moveTo(<code>Object
  722. options</code>)
  723. </td>
  724. </tr>
  725. <tr class="hidden" parent="moveTo">
  726. <td class="mid">Returns: none</td>
  727. <td>You can animate or move the camera using the moveTo method. Options are:
  728. <pre class="code">
  729. {
  730. position: {x:Number, y:Number},
  731. scale: Number,
  732. offset: {x:Number, y:Number}
  733. animation: { // -------------------> can be a boolean too!
  734. duration: Number
  735. easingFunction: String
  736. }
  737. }
  738. </pre>
  739. The position (in canvas units!) is the position of the central focus point of the camera.
  740. The scale is the target zoomlevel. Default value is 1.0.
  741. The offset (in DOM units) is how many pixels from the center the view is focussed. Default value is
  742. {x:0,y:0}.
  743. For animation you can either use a Boolean to use it with the default options or disable it or you can
  744. define the duration (in milliseconds) and easing function manually. Available are:
  745. <code>linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic,
  746. easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint</code>.
  747. <i>You will have to define at least a scale or a position. Otherwise, there is nothing to move to.</i>
  748. </td>
  749. </tr>
  750. <tr class="collapsible toggle" onclick="toggleTable('methodTable','releaseNode', this);">
  751. <td colspan="2"><span parent="releaseNode" class="right-caret"></span> releaseNode()</td>
  752. </tr>
  753. <tr class="hidden" parent="releaseNode">
  754. <td class="mid">Returns: none</td>
  755. <td>Programatically release the focussed node.</td>
  756. </tr>
  757. </table>
  758. <br>
  759. <br>
  760. <br>
  761. <br>
  762. <h4 id="optionsObject">Cluster options object</h4>
  763. <p>The options object supplied to the cluster functions can contain these properties:</p>
  764. <table class="moduleTable">
  765. <tr class="header">
  766. <td class="name">name</td>
  767. <td>Type</td>
  768. <td>description</td>
  769. </tr>
  770. <tr>
  771. <td>joinCondition(<br>&nbsp;&nbsp;<code>Object nodeOptions</code><br>)</td>
  772. <td class="mid">Function</td>
  773. <td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are
  774. selected to be in the cluster and calls this function with their data as argument.
  775. If this function returns true, this node will be added to the cluster. You have access to all options
  776. (including the default)
  777. as well as any custom fields you may have added to the node to determine whether or not to include it in
  778. the cluster. Example:
  779. <pre class="prettyprint lang-js">
  780. var nodes = [
  781. {id: 4, label: 'Node 4'},
  782. {id: 5, label: 'Node 5'},
  783. {id: 6, label: 'Node 6', cid:1},
  784. {id: 7, label: 'Node 7', cid:1}
  785. ]
  786. var options = {
  787. joinCondition:function(nodeOptions) {
  788. return nodeOptions.cid === 1;
  789. }
  790. }
  791. network.clustering.cluster(options);
  792. </pre>
  793. </td>
  794. </tr>
  795. <tr>
  796. <td>processProperties(<br>&nbsp;&nbsp;<code>Object nodeOptions</code><br>)</td>
  797. <td class="mid">Function</td>
  798. <td><i>Optional. </i> Before creating the new cluster node, this (optional) function will be called with the
  799. properties supplied by you (<code>clusterNodeProperties</code>), all contained nodes and all contained
  800. edges. You can use this to update the
  801. properties of the cluster based on which items it contains. The function should return the properties to
  802. create the cluster node. In the example below, we ensure preservation of mass and value when forming the
  803. cluster:
  804. <pre class="prettyprint lang-js">
  805. var options = {
  806. processProperties: function (clusterOptions, childNodes, childEdges) {
  807. var totalMass = 0;
  808. var totalValue = 0;
  809. for (var i = 0; i < childNodes.length; i++) {
  810. totalMass += childNodes[i].mass;
  811. totalValue = childNodes[i].value ? totalValue + childNodes[i].value : totalValue;
  812. }
  813. clusterOptions.mass = totalMass;
  814. if (totalValue > 0) {
  815. clusterOptions.value = totalValue;
  816. }
  817. return clusterOptions;
  818. },
  819. }
  820. </pre>
  821. </td>
  822. </tr>
  823. <tr>
  824. <td>clusterNodeProperties</td>
  825. <td class="mid">Object</td>
  826. <td><i>Optional. </i> This is an object containing the options for the cluster node. All options described
  827. in the <a href="./nodes.html">nodes module</a> are allowed. This allows you to style your cluster node
  828. any way you want. This is also the style object that is provided in the processProperties function for
  829. fine tuning. If undefined, default node options will be used.
  830. </td>
  831. </tr>
  832. <tr>
  833. <td>clusterEdgeProperties</td>
  834. <td class="mid">Object</td>
  835. <td><i>Optional. </i> This is an object containing the options for the edges connected to the cluster. All
  836. options described in the <a href="./edges.html">edges module</a> are allowed. Using this, you can style
  837. the edges connecting to the cluster any way you want. If none are provided, the optoins from the edges
  838. that are replaced are used. If undefined, default edge options will be used.
  839. </td>
  840. </tr>
  841. </table>
  842. <br>
  843. <br>
  844. <br>
  845. <br>
  846. <br>
  847. <h3>All Events</h3>
  848. <p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
  849. <p>These events are fired by the interaction module. They are related to user input.</p>
  850. <table class="moduleTable">
  851. <tr class="header">
  852. <td class="eventName">name</td>
  853. <td class="eventProperties">properties</td>
  854. <td>description</td>
  855. </tr>
  856. <tr class="subHeader evenRow">
  857. <td colspan="3">Events triggered by human interaction, selection, dragging etc.</td>
  858. </tr>
  859. <tr class="evenRow">
  860. <td>click</td>
  861. <td class="mid">
  862. <pre class="code">
  863. {
  864. nodes: [Array of selected nodeIds],
  865. edges: [Array of selected edgeIds],
  866. event: [Object] original click event,
  867. pointer: {
  868. DOM: {x:pointer_x, y:pointer_y},
  869. canvas: {x:canvas_x, y:canvas_y}
  870. }
  871. }
  872. </pre>
  873. </td>
  874. <td>Fired when the user clicks the mouse or taps on a touchscreen device.</td>
  875. </tr>
  876. <tr class="evenRow">
  877. <td>doubleClick</td>
  878. <td class="mid">same as <code>click</code>.</td>
  879. <td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double click
  880. is in fact 2 clicks, 2 click events are fired, followed by a double click event. If you do not want to
  881. use the click events if a double click event is fired, just check the time between click events before
  882. processing them.
  883. </td>
  884. </tr>
  885. <tr class="evenRow">
  886. <td>oncontext</td>
  887. <td class="mid">same as <code>click</code>.</td>
  888. <td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not
  889. select by default. You can use <a href="./selection.html">getNodeAt</a> to select the node if you want.
  890. </td>
  891. </tr>
  892. <tr class="evenRow">
  893. <td>hold</td>
  894. <td class="mid">same as <code>click</code>.</td>
  895. <td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click event
  896. is also fired in this case.
  897. </td>
  898. </tr>
  899. <tr class="evenRow">
  900. <td>release</td>
  901. <td class="mid">same as <code>click</code>.</td>
  902. <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.</td>
  903. </tr>
  904. <tr class="evenRow">
  905. <td>select</td>
  906. <td class="mid">same as <code>click</code>.</td>
  907. <td>Fired when the selection has changed by user action. This means a node or edge has been selected, added
  908. to the selection or deselected. <b>All select events are only triggerd on click and hold</b>.
  909. </td>
  910. </tr>
  911. <tr class="evenRow">
  912. <td>selectNode</td>
  913. <td class="mid">same as <code>click</code>.</td>
  914. <td>Fired when a node has been selected by the user.</td>
  915. </tr>
  916. <tr class="evenRow">
  917. <td>selectEdge</td>
  918. <td class="mid">same as <code>click</code>.</td>
  919. <td>Fired when a edge has been selected by the user.</td>
  920. </tr>
  921. <tr class="evenRow">
  922. <td>deselectNode</td>
  923. <td class="mid"><pre class="code">
  924. {
  925. nodes: [Array of selected nodeIds],
  926. edges: [Array of selected edgeIds],
  927. event: [Object] original click event,
  928. pointer: {
  929. DOM: {x:pointer_x, y:pointer_y},
  930. canvas: {x:canvas_x, y:canvas_y}
  931. }
  932. },
  933. previousSelection: {
  934. nodes: [Array of previously selected nodeIds],
  935. edges: [Array of previously selected edgeIds]
  936. }
  937. }
  938. </pre>
  939. </td>
  940. <td>Fired when a node (or nodes) has (or have) been deselected by the user. The previous selection is the
  941. list of nodes and edges that were selected before the last user event.
  942. </td>
  943. </tr>
  944. <tr class="evenRow">
  945. <td>deselectEdge</td>
  946. <td class="mid">same as <code>deselectNode</code>.</td>
  947. <td>Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is the
  948. list of nodes and edges that were selected before the last user event.
  949. </td>
  950. </tr>
  951. <tr class="evenRow">
  952. <td>dragStart</td>
  953. <td class="mid">same as <code>click</code>.</td>
  954. <td>Fired when starting a drag.</td>
  955. </tr>
  956. <tr class="evenRow">
  957. <td>dragging</td>
  958. <td class="mid">same as <code>click</code>.</td>
  959. <td>Fired when dragging node(s) or the view.</td>
  960. </tr>
  961. <tr class="evenRow">
  962. <td>dragEnd</td>
  963. <td class="mid">same as <code>click</code>.</td>
  964. <td>Fired when the drag has finished.</td>
  965. </tr>
  966. <tr class="evenRow">
  967. <td>zoom</td>
  968. <td class="mid"><code>{direction:'+'/'-'}</code></td>
  969. <td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in.</td>
  970. </tr>
  971. <tr class="evenRow">
  972. <td>showPopup</td>
  973. <td class="mid"><code>id of item corresponding to popup</code></td>
  974. <td>Fired when the popup is shown.</td>
  975. </tr>
  976. <tr class="evenRow">
  977. <td>hidePopup</td>
  978. <td class="mid">none</td>
  979. <td>Fired when the popup is hidden.</td>
  980. </tr>
  981. <tr class="subHeader oddRow">
  982. <td colspan="3">Events triggered the physics simulation. Can be used to trigger GUI updates.</td>
  983. </tr>
  984. <tr class="oddRow">
  985. <td>startStabilizing</td>
  986. <td class="mid">none</td>
  987. <td>Fired when stabilization starts. This is also the case when you drag a node and the physics simulation
  988. restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'.
  989. </td>
  990. <tr class="oddRow">
  991. <td>stabilizationProgress</td>
  992. <td class="mid">
  993. <pre class="code">
  994. {
  995. iterations: Number // iterations so far,
  996. total: Number // total iterations in options
  997. }
  998. </pre>
  999. </td>
  1000. <td>Fired when a multiple of the <code>updateInterval</code> number of iterations is reached. This only
  1001. occurs in the 'hidden' stabilization.
  1002. </td>
  1003. </tr>
  1004. <tr class="oddRow">
  1005. <td>stabilizationIterationsDone</td>
  1006. <td class="mid">none</td>
  1007. <td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is
  1008. stabilized; it could also mean that the amount of iterations defined in the options has been reached.
  1009. </td>
  1010. <tr class="oddRow">
  1011. <td>stabilized</td>
  1012. <td class="mid">
  1013. <pre class="code">
  1014. {
  1015. iterations: Number // iterations it took
  1016. }
  1017. </pre>
  1018. </td>
  1019. <td>Fired when the network has stabilized or when the <code>stopSimulation()</code> has been called. The
  1020. amount of iterations it took could be used to tweak the maximum amount of iterations needed to stabilize
  1021. the network.
  1022. </td>
  1023. <tr class="subHeader evenRow">
  1024. <td colspan="3">Event triggered by the canvas.</td>
  1025. </tr>
  1026. <tr class="evenRow">
  1027. <td>resize</td>
  1028. <td class="mid">
  1029. <pre class="code">
  1030. {
  1031. width: Number // the new width of the canvas
  1032. height: Number // the new height of the canvas
  1033. oldWidth: Number // the old width of the canvas
  1034. oldHeight: Number // the old height of the canvas
  1035. }
  1036. </pre>
  1037. <ul>
  1038. </ul>
  1039. </td>
  1040. <td>Fired when the size of the canvas has been resized, either by a redraw call when the container div has
  1041. changed in size, a setSize() call with new values or a setOptions() with new width and/or height values.
  1042. </td>
  1043. </tr>
  1044. <tr class="subHeader oddRow">
  1045. <td colspan="3">Events triggered by the rendering module. Can be used to draw custom elements on the
  1046. canvas.
  1047. </td>
  1048. </tr>
  1049. <tr class="oddRow">
  1050. <td>initRedraw</td>
  1051. <td class="mid">none</td>
  1052. <td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to move
  1053. custom elements before starting drawing the new frame.
  1054. </td>
  1055. <tr class="oddRow">
  1056. <td>beforeDrawing</td>
  1057. <td class="mid"><code>canvas context</code></td>
  1058. <td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before all
  1059. edges and nodes are drawn. Can be used to draw behind the network.
  1060. </td>
  1061. <tr class="oddRow">
  1062. <td>afterDrawing</td>
  1063. <td class="mid"><code>canvas context</code></td>
  1064. <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.</td>
  1065. </tr>
  1066. <tr class="subHeader evenRow">
  1067. <td colspan="3">Event triggered by the view module.</td>
  1068. </tr>
  1069. <tr class="evenRow">
  1070. <td>animationFinished</td>
  1071. <td class="mid">none</td>
  1072. <td>Fired when an animation is finished.</td>
  1073. </table>
  1074. <br>
  1075. <br>
  1076. <br>
  1077. <br>
  1078. <br>
  1079. <br>
  1080. <br>
  1081. <br>
  1082. <br>
  1083. <br>
  1084. </div>
  1085. <!-- Bootstrap core JavaScript
  1086. ================================================== -->
  1087. <!-- Placed at the end of the document so the pages load faster -->
  1088. <script src="../js/jquery.min.js"></script>
  1089. <script src="../js/bootstrap.min.js"></script>
  1090. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  1091. <script src="../js/ie10-viewport-bug-workaround.js"></script>