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.

1695 lines
84 KiB

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  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 - Network documentation.</title>
  11. <!-- Bootstrap core CSS -->
  12. <link href="../css/bootstrap.css" rel="stylesheet">
  13. <!-- Tipue vendor css -->
  14. <link href="../css/tipuesearch.css" rel="stylesheet">
  15. <link href="../css/style.css" rel="stylesheet">
  16. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  17. <!--[if lt IE 9]>
  18. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  19. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  20. <![endif]-->
  21. <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
  22. <script type="text/javascript" src="../js/googleAnalytics.js"></script>
  23. <script type="text/javascript" src="../js/prettify/prettify.js"></script>
  24. <script src="../js/smooth-scroll.min.js"></script>
  25. <script language="JavaScript">
  26. smoothScroll.init();
  27. </script>
  28. <style>
  29. tr.subHeader {
  30. font-weight: bold;
  31. font-style: italic;
  32. }
  33. tr.subHeader td {
  34. padding-top: 30px;
  35. }
  36. td.midMethods {
  37. width: 150px;
  38. background-color: #ffffff;
  39. border: 1px solid #dddddd;
  40. }
  41. tr.visible td {
  42. padding: 10px;
  43. }
  44. </style>
  45. <script>
  46. function toggleGettingStarted(aThis) {
  47. var gettingStartedDiv = document.getElementById('gettingStarted');
  48. if (aThis.innerHTML.indexOf("Show") !== -1) {
  49. gettingStartedDiv.className = '';
  50. aThis.innerHTML = 'Hide the getting started again.';
  51. }
  52. else {
  53. gettingStartedDiv.className = 'hidden';
  54. aThis.innerHTML = 'Show the getting started!';
  55. }
  56. }
  57. </script>
  58. <script type="text/javascript" src="../js/toggleTable.js"></script>
  59. </head>
  60. <body onload="prettyPrint();">
  61. <div class="navbar-wrapper">
  62. <div class="container">
  63. <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  64. <div class="container">
  65. <div class="navbar-header">
  66. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
  67. aria-expanded="false" aria-controls="navbar">
  68. <span class="sr-only">Toggle navigation</span>
  69. <span class="icon-bar"></span>
  70. <span class="icon-bar"></span>
  71. <span class="icon-bar"></span>
  72. </button>
  73. <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
  74. </div>
  75. <div id="navbar" class="navbar-collapse collapse">
  76. <ul class="nav navbar-nav">
  77. <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
  78. <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
  79. <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
  80. <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
  81. <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
  82. <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
  83. <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
  84. </ul>
  85. <form class="navbar-form navbar-right" role="search">
  86. <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords">
  87. <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">Go!</button>
  88. </form>
  89. <div id="search-results-wrapper" class="panel panel-default">
  90. <div class="panel-body">
  91. <div id="tipue_search_content"></div>
  92. </div>
  93. </div>
  94. <div id="keyword-info" class="panel panel-success">
  95. <div class="panel-body">
  96. Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence!
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. </nav>
  102. </div>
  103. </div>
  104. <a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img
  105. style="position: absolute; top: 0; right: 0; border: 0;"
  106. src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
  107. alt="Fork me on GitHub"
  108. data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
  109. <div class="container full">
  110. <h1>Network</h1>
  111. <p>Network is a visualization to display networks and networks consisting of nodes and edges. The visualization
  112. is easy to use and supports custom shapes, styles, colors, sizes, images, and more.
  113. The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. To
  114. handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.</p>
  115. <p>As of 4.0, the network consists of individual modules which handle specific parts of the network. These modules
  116. have their own docs, options, methods and events which you can access
  117. by clicking on the modules in the list below.</p>
  118. <a class="btn btn-primary" role="button" onclick="toggleGettingStarted(this)">Show the getting started!</a>
  119. <div id="gettingStarted" class="hidden">
  120. <h3>Creating a Network</h3>
  121. <p>
  122. Creating a vis network is easy. <a href="http://visjs.org/#download_install" target="_blank">It requires you to
  123. include the vis.js and css files which you can get here</a>. If you have these
  124. added to your application, you will need to specify your nodes and edges. You can use DOT language or export
  125. nodes and edges from Gephi if you'd like but we will do it without these for now.
  126. For more information on this click the tabs below. You can also use the vis.DataSets for dynamic data binding,
  127. for instance, changing the color, label or any option after you have initialized the network.
  128. <br><br>
  129. Once you have the data, all you need is a container div to tell vis where to put your network. Additionally you
  130. can use an options object to customize many aspects of the network. In code this
  131. looks like this:</p>
  132. <pre class="prettyprint lang-html options">
  133. &lt;html&gt;
  134. &lt;head&gt;
  135. &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
  136. &lt;link href="../../dist/vis.css" rel="stylesheet" type="text/css" /&gt;
  137. &lt;style type="text/css"&gt;
  138. #mynetwork {
  139. width: 600px;
  140. height: 400px;
  141. border: 1px solid lightgray;
  142. }
  143. &lt;/style&gt;
  144. &lt;/head&gt;
  145. &lt;body&gt;
  146. &lt;div id="mynetwork"&gt;&lt;/div&gt;
  147. &lt;script type="text/javascript"&gt;
  148. // create an array with nodes
  149. var nodes = new vis.DataSet([
  150. {id: 1, label: 'Node 1'},
  151. {id: 2, label: 'Node 2'},
  152. {id: 3, label: 'Node 3'},
  153. {id: 4, label: 'Node 4'},
  154. {id: 5, label: 'Node 5'}
  155. ]);
  156. // create an array with edges
  157. var edges = new vis.DataSet([
  158. {from: 1, to: 3},
  159. {from: 1, to: 2},
  160. {from: 2, to: 4},
  161. {from: 2, to: 5}
  162. ]);
  163. // create a network
  164. var container = document.getElementById('mynetwork');
  165. // provide the data in the vis format
  166. var data = {
  167. nodes: nodes,
  168. edges: edges
  169. };
  170. var options = {};
  171. // initialize your network!
  172. var network = new vis.Network(container, data, options);
  173. &lt;/script&gt;
  174. &lt;/body&gt;
  175. &lt;/html&gt;
  176. </pre>
  177. <p><a href="http://visjs.org/examples/network/basicUsage.html" target="_blank">The result of the code above will be the basic example which is shown here.</a></p>
  178. <br>
  179. </div>
  180. <h2 id="Contents">Contents</h2>
  181. <ul>
  182. <li><a href="#modules">Modules</a></li>
  183. <li><a href="#options">Options</a></li>
  184. <li><a href="#methods">Method Reference</a>
  185. <ul>
  186. <li><a href="#methodGlobal">Global</a></li>
  187. <li><a href="#methodCanvas">Canvas</a></li>
  188. <li><a href="#methodClustering">Clustering</a></li>
  189. <li><a href="#methodLayout">Layout</a></li>
  190. <li><a href="#methodManipulation">Manipulation</a></li>
  191. <li><a href="#methodInformation">Information</a></li>
  192. <li><a href="#methodPhysics">Physics</a></li>
  193. <li><a href="#methodSelection">Selection</a></li>
  194. <li><a href="#methodViewport">Viewport</a></li>
  195. <li><a href="#methodConfigurator">Configurator</a></li>
  196. </ul>
  197. </li>
  198. <li><a href="#Events">Events</a></li>
  199. <li><a href="#importing_data">Importing Data</a>
  200. <ul>
  201. <li><a href="#importGephi">from Gephi</a></li>
  202. <li><a href="#importDot">from DOT language</a></li>
  203. </ul>
  204. </li>
  205. </ul>
  206. <h2 id="modules">Modules</h2>
  207. <table class="modules">
  208. <tr>
  209. <td width="120px"><a href="./configure.html">configure</a></td>
  210. <td>Generates an interactive option editor with filtering.</td>
  211. </tr>
  212. <tr>
  213. <td><a href="./edges.html">edges</a></td>
  214. <td>Handles the creation and deletion of edges and contains the global edge options and styles.</td>
  215. </tr>
  216. <tr>
  217. <td><a href="./groups.html">groups</a></td>
  218. <td>Contains the groups and some options on how to handle nodes with non-existing groups.</td>
  219. </tr>
  220. <tr>
  221. <td><a href="./interaction.html">interaction</a></td>
  222. <td>Used for all user interaction with the network. Handles mouse and touch events and selection as well as
  223. the navigation buttons and the popups.
  224. </td>
  225. </tr>
  226. <tr>
  227. <td><a href="./layout.html">layout</a></td>
  228. <td>Governs the initial and hierarchical positioning.</td>
  229. </tr>
  230. <tr>
  231. <td><a href="./manipulation.html">manipulation</a></td>
  232. <td>Supplies an API and optional GUI to alter the data in the network.</td>
  233. </tr>
  234. <tr>
  235. <td><a href="./nodes.html">nodes</a></td>
  236. <td>Handles the creation and deletion of nodes and contains the global node options and styles.</td>
  237. </tr>
  238. <tr>
  239. <td><a href="./physics.html">physics</a></td>
  240. <td>Does all the simulation moving the nodes and edges to their final positions, also governs
  241. stabilization.
  242. </td>
  243. </tr>
  244. </table>
  245. <br>
  246. <div id="optionsDiv">
  247. <h2 id="options">Options</h2>
  248. <pre class="prettyprint lang-js options">
  249. var options = {
  250. autoResize: true,
  251. height: '100%',
  252. width: '100%'
  253. locale: 'en',
  254. locales: locales,
  255. clickToUse: false,
  256. configure: {...}, // defined in the configure module.
  257. edges: {...}, // defined in the edges module.
  258. nodes: {...}, // defined in the nodes module.
  259. groups: {...}, // defined in the groups module.
  260. layout: {...}, // defined in the layout module.
  261. interaction: {...}, // defined in the interaction module.
  262. manipulation: {...}, // defined in the manipulation module.
  263. physics: {...}, // defined in the physics module.
  264. }
  265. network.setOptions(options);
  266. </pre>
  267. <p>The individual options are explained below. The ones referring to modules are explained in the corresponding
  268. module.</p>
  269. <table class="options">
  270. <tr>
  271. <th>Name</th>
  272. <th>Type</th>
  273. <th>Default</th>
  274. <th>Description</th>
  275. </tr>
  276. <tr><td id="event_autoResize">autoResize</td>
  277. <td>Boolean</td>
  278. <td><code>true</code></td>
  279. <td>If true, the Network will automatically detect when its container is resized, and redraw itself
  280. accordingly. If false, the Network can be forced to repaint after its container has been resized
  281. using the function redraw() and setSize().
  282. </td>
  283. </tr>
  284. <tr><td id="event_width">width</td>
  285. <td>String</td>
  286. <td><code>'100%'</code></td>
  287. <td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
  288. </tr>
  289. <tr><td id="event_height">height</td>
  290. <td>String</td>
  291. <td><code>'100%'</code></td>
  292. <td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
  293. </tr>
  294. <tr><td id="event_locale">locale</td>
  295. <td>String</td>
  296. <td><code>'en'</code></td>
  297. <td>Select the locale. By default, the language is English.
  298. </td>
  299. </tr>
  300. <tr><td id="event_locales">locales</td>
  301. <td>Object</td>
  302. <td>defaultLocales</td>
  303. <td>Locales object. By default
  304. <code>'en'</code>,
  305. <code>'de'</code>,
  306. <code>'es'</code>,
  307. <code>'it'</code>,
  308. <code>'nl'</code>
  309. <code>'pt-br'</code>,
  310. <code>'ru'</code>
  311. are supported. Take a look at the
  312. <a href="#locales" data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }">locales section below</a>
  313. for more explaination on how to customize this.
  314. </td>
  315. </tr>
  316. <tr><td id="event_clickToUse">clickToUse</td>
  317. <td>Boolean</td>
  318. <td>false</td>
  319. <td>When a Network is configured to be <code>clickToUse</code>, it will react to mouse and touch events only when active. When active, a blue shadow border is displayed around the Network. The network is set active by clicking on it, and is changed to inactive again by clicking outside the Network or by pressing the ESC key.
  320. </td>
  321. </tr>
  322. <tr><td id="event_configure">configure</td>
  323. <td>Object</td>
  324. <td>Object</td>
  325. <td>All options in this object are explained in the <a href="./configure.html">configure module</a>.
  326. </td>
  327. </tr>
  328. <tr><td id="event_edges">edges</td>
  329. <td>Object</td>
  330. <td>Object</td>
  331. <td>All options in this object are explained in the <a href="./edges.html">edges module</a>.
  332. </td>
  333. </tr>
  334. <tr><td id="event_nodes">nodes</td>
  335. <td>Object</td>
  336. <td>Object</td>
  337. <td>All options in this object are explained in the <a href="./nodes.html">nodes module</a>.
  338. </td>
  339. </tr>
  340. <tr><td id="event_groups">groups</td>
  341. <td>Object</td>
  342. <td>Object</td>
  343. <td>All options in this object are explained in the <a href="./groups.html">groups module</a>.
  344. </td>
  345. </tr>
  346. <tr><td id="event_layout">layout</td>
  347. <td>Object</td>
  348. <td>Object</td>
  349. <td>All options in this object are explained in the <a href="./layout.html">layout module</a>.
  350. </td>
  351. </tr>
  352. <tr><td id="event_interaction">interaction</td>
  353. <td>Object</td>
  354. <td>Object</td>
  355. <td>All options in this object are explained in the <a href="./interaction.html">interaction module</a>.
  356. </td>
  357. </tr>
  358. <tr><td id="event_manipulation">manipulation</td>
  359. <td>Object</td>
  360. <td>Object</td>
  361. <td>All options in this object are explained in the <a href="./manipulation.html">manipulation module</a>.
  362. </td>
  363. </tr>
  364. <tr><td id="event_physics">physics</td>
  365. <td>Object</td>
  366. <td>Object</td>
  367. <td>All options in this object are explained in the <a href="./physics.html">physics module</a>.
  368. </td>
  369. </tr>
  370. </table>
  371. <br>
  372. <br>
  373. <h4 id="locales">Custom locales</h4>
  374. <p>The locales object has the following format:</p>
  375. <pre class="prettyprint lang-js">
  376. var locales = {
  377. en: {
  378. edit: 'Edit',
  379. del: 'Delete selected',
  380. back: 'Back',
  381. addNode: 'Add Node',
  382. addEdge: 'Add Edge',
  383. editNode: 'Edit Node',
  384. editEdge: 'Edit Edge',
  385. addDescription: 'Click in an empty space to place a new node.',
  386. edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
  387. editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
  388. createEdgeError: 'Cannot link edges to a cluster.',
  389. deleteClusterError: 'Clusters cannot be deleted.',
  390. editClusterError: 'Clusters cannot be edited.'
  391. }
  392. }</pre>
  393. <p>If you want to define your own locale, you can change the key ('en' here) and change all the strings. You can
  394. then use your new key in the locale option.</p>
  395. </div>
  396. <br /><hr />
  397. <div id="methodsDiv">
  398. <h2 id="methods">Methods</h2>
  399. <p>This is a list of all the methods in the public API. They have been grouped by category, which correspond to
  400. the
  401. modules listed above.</p>
  402. <table class="methods-collapsable" id="methodTable">
  403. <tr id="methodGlobal" class="subHeader">
  404. <td colspan="2">Global methods for the network.</td>
  405. </tr>
  406. <tr class="collapsible toggle" onclick="toggleTable('methodTable','destroy', this);">
  407. <td colspan="2"><span parent="destroy" class="right-caret" id="method_destroy"></span> destroy()</td>
  408. </tr>
  409. <tr class="hidden" parent="destroy">
  410. <td class="midMethods">Returns: none</td>
  411. <td>Remove the network from the DOM and remove all Hammer bindings and references.</td>
  412. </tr>
  413. <tr class="collapsible toggle" onclick="toggleTable('methodTable','setData', this);">
  414. <td colspan="2"><span parent="setData" class="right-caret" id="method_setData"></span> setData({<code><i>nodes: vis
  415. DataSet/Array</i></code>,<code><i>edges: vis
  416. DataSet/Array</i></code>})
  417. </td>
  418. </tr>
  419. <tr class="hidden" parent="setData">
  420. <td class="midMethods">Returns: none</td>
  421. <td>Override all the data in the network. If stabilization is enabled in the <a href="physics.html">physics
  422. module</a>, the network will stabilize again. This method is also performed when first initializing
  423. the
  424. network.
  425. </td>
  426. </tr>
  427. <tr class="collapsible toggle" onclick="toggleTable('methodTable','setOptions', this);">
  428. <td colspan="2"><span parent="setOptions" class="right-caret" id="method_setOptions"></span> setOptions(<code>Object
  429. options</code>)
  430. </td>
  431. </tr>
  432. <tr class="hidden" parent="setOptions">
  433. <td class="midMethods">Returns: none</td>
  434. <td>Set the options. All available options can be found in the modules above. Each module requires it's
  435. own
  436. container with the module name to contain its options.
  437. </td>
  438. </tr>
  439. <tr class="collapsible toggle" onclick="toggleTable('methodTable','onEvent', this);">
  440. <td colspan="2"><span parent="onEvent" class="right-caret" id="method_on"></span> on(<code>String event name, Function callback</code>)
  441. </td>
  442. </tr>
  443. <tr class="hidden" parent="onEvent">
  444. <td class="midMethods">Returns: none</td>
  445. <td>Set an event listener. Depending on the type of event you get different parameters for the callback function. Look at the event section of the documentation for more information.
  446. </td>
  447. </tr>
  448. <tr class="collapsible toggle" onclick="toggleTable('methodTable','offEvent', this);">
  449. <td colspan="2"><span parent="offEvent" class="right-caret" id="method_off"></span> off(<code>String event name, Function callback</code>)
  450. </td>
  451. </tr>
  452. <tr class="hidden" parent="offEvent">
  453. <td class="midMethods">Returns: none</td>
  454. <td>Remove an event listener. The function you supply has to be the exact same as the one you used in the on function. If no function is supplied, all listeners will be removed. Look at the event section of the documentation for more information.
  455. </td>
  456. </tr>
  457. <tr class="collapsible toggle" onclick="toggleTable('methodTable','onceEvent', this);">
  458. <td colspan="2"><span parent="onceEvent" class="right-caret" id="method_once"></span> once(<code>String event name, Function callback</code>)
  459. </td>
  460. </tr>
  461. <tr class="hidden" parent="onceEvent">
  462. <td class="midMethods">Returns: none</td>
  463. <td>Set an event listener only once. After it has taken place, the event listener will be removed. Depending on the type of event you get different parameters for the callback function. Look at the event section of the documentation for more information.
  464. </td>
  465. </tr>
  466. <tr id="methodCanvas" class="subHeader">
  467. <td colspan="2">Methods related to the canvas.</td>
  468. </tr>
  469. <tr class="collapsible toggle" onclick="toggleTable('methodTable','canvasToDOM', this);">
  470. <td colspan="2"><span parent="canvasToDOM" class="right-caret" id="method_canvasToDOM"></span> canvasToDOM({<code><i>x:
  471. Number</i></code>,<code><i>y:
  472. Number</i></code>})
  473. </td>
  474. </tr>
  475. <tr class="hidden" parent="canvasToDOM">
  476. <td class="midMethods">Returns: Object</td>
  477. <td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the
  478. form of
  479. <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container.
  480. </td>
  481. </tr>
  482. <tr class="collapsible toggle" onclick="toggleTable('methodTable','DOMtoCanvas', this);">
  483. <td colspan="2"><span parent="DOMtoCanvas" class="right-caret" id="method_DOMtoCanvas"></span> DOMtoCanvas({<code><i>x:
  484. Number</i></code>,<code><i>y:
  485. Number</i></code>})
  486. </td>
  487. </tr>
  488. <tr class="hidden" parent="DOMtoCanvas">
  489. <td class="midMethods">Returns: Object</td>
  490. <td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the
  491. form of
  492. <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container.
  493. </td>
  494. </tr>
  495. <tr class="collapsible toggle" onclick="toggleTable('methodTable','redraw', this);">
  496. <td colspan="2"><span parent="redraw" class="right-caret" id="method_redraw"></span> redraw()</td>
  497. </tr>
  498. <tr class="hidden" parent="redraw">
  499. <td class="midMethods">Returns: none</td>
  500. <td>Redraw the network.</td>
  501. </tr>
  502. <tr class="collapsible toggle" onclick="toggleTable('methodTable','setSize', this);">
  503. <td colspan="2"><span parent="setSize" class="right-caret" id="method_setSize"></span> setSize(<code><i>String
  504. width</i></code>,<code><i>String
  505. height</i></code>)
  506. </td>
  507. </tr>
  508. <tr class="hidden" parent="setSize">
  509. <td class="midMethods">Returns: none</td>
  510. <td>Set the size of the canvas. This is automatically done on a window resize.</td>
  511. </tr>
  512. <tr id="methodClustering" class="subHeader">
  513. <td colspan="2">Clustering</td>
  514. </tr>
  515. <tr class="collapsible toggle" onclick="toggleTable('methodTable','cluster', this);">
  516. <td colspan="2"><span parent="cluster" class="right-caret" id="method_cluster"></span> cluster(
  517. <code>Object options</code>)
  518. </td>
  519. </tr>
  520. <tr class="hidden" parent="cluster">
  521. <td class="midMethods">Returns: none</td>
  522. <td>The options object is explained in full <a data-scroll=""
  523. data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }"
  524. href="#optionsObject">below</a>. The joinCondition
  525. function
  526. is presented with all nodes.
  527. </td>
  528. </tr>
  529. <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByConnection', this);">
  530. <td colspan="2"><span parent="clusterByConnection" class="right-caret" id="method_clusterByConnection"></span> clusterByConnection(
  531. <code>String nodeId</code>,
  532. <code>[Object options]</code>
  533. )
  534. </td>
  535. </tr>
  536. <tr class="hidden" parent="clusterByConnection">
  537. <td class="midMethods">Returns: none</td>
  538. <td>This method looks at the provided node and makes a cluster of it and all it's connected nodes. The
  539. behaviour can be customized by proving the options object. All options of this object are explained
  540. <a
  541. data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }"
  542. href="#optionsObject">below</a>. The joinCondition is only presented with the connected
  543. nodes.
  544. </td>
  545. </tr>
  546. <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);">
  547. <td colspan="2"><span parent="clusterByHubsize" class="right-caret" id="method_clusterByHubsize"></span> clusterByHubsize(
  548. <code>[Number hubsize]</code>,
  549. <code>[Object options]</code>)
  550. </td>
  551. </tr>
  552. <tr class="hidden" parent="clusterByHubsize">
  553. <td class="midMethods">Returns: none</td>
  554. <td>This method checks all nodes in the network and those with a equal or higher amount of edges than
  555. specified with the <code>hubsize</code> qualify. If a hubsize is not defined, the hubsize will be determined as the average
  556. value plus two standard deviations. <br><br>
  557. For all qualifying nodes, clusterByConnection is performed on each of them.
  558. The options object is described for <code>clusterByConnection</code> and does the same here.
  559. </td>
  560. </tr>
  561. <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterOutliers', this);">
  562. <td colspan="2"><span parent="clusterOutliers" class="right-caret" id="method_clusterOutliers"></span> clusterOutliers(
  563. <code>[Object options]</code>)
  564. </tr>
  565. <tr class="hidden" parent="clusterOutliers">
  566. <td class="midMethods">Returns: none</td>
  567. <td>This method will cluster all nodes with 1 edge with their respective connected node.
  568. The options object is explained in full <a data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }" href="#optionsObject">below</a>.
  569. </td>
  570. </tr>
  571. <tr class="collapsible toggle" onclick="toggleTable('methodTable','findNode', this);">
  572. <td colspan="2"><span parent="findNode" class="right-caret" id="method_findNode"></span> findNode(
  573. <code>String/Number nodeId</code>)
  574. </tr>
  575. <tr class="hidden" parent="findNode">
  576. <td class="midMethods">Returns: Array</td>
  577. <td>Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of
  578. nodeIds showing where the node is.
  579. <br><br>
  580. If any nodeId in the chain, especially the first passed in as a parameter, is not present in
  581. the current nodes list, an empty array is returned.
  582. <br><br> Example:
  583. cluster 'A' contains cluster 'B',
  584. cluster 'B' contains cluster 'C',
  585. cluster 'C' contains node 'fred'.
  586. <code>network.clustering.findNode('fred')</code> will return <code>['A','B','C','fred']</code>.
  587. </td>
  588. </tr>
  589. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getClusteredEdges', this);">
  590. <td colspan="2"><span parent="getClusteredEdges" class="right-caret" id="method_getClusteredEdges"></span> getClusteredEdges(
  591. <code>String baseEdgeId</code>)
  592. </tr>
  593. <tr class="hidden" parent="getClusteredEdges">
  594. <td class="midMethods">Returns: Array</td>
  595. <td>Similiar to <code>findNode</code> in that it returns all the edge ids that were created from the provided edge during clustering
  596. </td>
  597. </tr>
  598. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBaseEdge', this);">
  599. <td colspan="2"><span parent="getBaseEdge" class="right-caret" id="method_getBaseEdge"></span> getBaseEdge(
  600. <code>String clusteredEdgeId</code>)
  601. </tr>
  602. <tr class="hidden" parent="getBaseEdge">
  603. <td class="midMethods">Returns: Value</td>
  604. <td>When a clusteredEdgeId is available, this method will return the original baseEdgeId provided in <code>data.edges</code><br/>
  605. ie. After clustering the 'SelectEdge' event is fired but provides only the clustered edge. This method can then be used to return the baseEdgeId.<br><br>
  606. <b>This method is deprecated. Please use <code>getBaseEdges()</code> instead.</b>
  607. </td>
  608. </tr>
  609. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBaseEdges', this);">
  610. <td colspan="2"><span parent="getBaseEdges" class="right-caret" id="method_getBaseEdges"></span>
  611. getBaseEdges(<code>String clusteredEdgeId</code>)
  612. </td>
  613. </tr>
  614. <tr class="hidden" parent="getBaseEdges">
  615. <td class="midMethods">Returns: Array</td>
  616. <td>For the given <code>clusteredEdgeId</code>, this method will return all the original base edge id's provided in <code>data.edges</code>.
  617. For a non-clustered (i.e. 'base') edge, <code>clusteredEdgeId</code> is returned.<br/><br/>
  618. Only the base edge id's are returned. All clustered edges id's under <code>clusteredEdgeId</code> are skipped, but scanned recursively to return their base id's.<br/>
  619. </td>
  620. </tr>
  621. <tr class="collapsible toggle" onclick="toggleTable('methodTable','updateEdge', this);">
  622. <td colspan="2"><span parent="updateEdge" class="right-caret" id="method_updateEdge"></span> updateEdge(
  623. <code>String startEdgeId, Object options</code>)
  624. </tr>
  625. <tr class="hidden" parent="updateEdge">
  626. <td class="midMethods">Returns: none</td>
  627. <td>Visible edges between clustered nodes are not the same edge as the ones provided in <code>data.edges</code> passed on <code>network</code> creation<br/>
  628. With each layer of clustering, copies of the edges between clusters are created and the previous edges are hidden, until the cluster is opened.<br/>
  629. This method takes an edgeId (ie. a base edgeId from <data>data.edges</code>) and applys the options to it and any edges that were created from it while clustering.<br><br> Example:
  630. <code>network.clustering.updateEdge(originalEdge.id, {color : '#aa0000'});</code><br/>
  631. This would turn the base edge and any subsequent edges red, so when opening clusters the edges will all be the same color.
  632. </td>
  633. </tr>
  634. <tr class="collapsible toggle" onclick="toggleTable('methodTable','updateClusteredNode', this);">
  635. <td colspan="2"><span parent="updateClusteredNode" class="right-caret" id="method_updateClusteredNode"></span> updateClusteredNode(
  636. <code>String clusteredNodeId, Object options</code>)
  637. </tr>
  638. <tr class="hidden" parent="updateClusteredNode">
  639. <td class="midMethods">Returns: none</td>
  640. <td>Clustered Nodes when created are not contained in the original <code>data.nodes</code> passed on <code>network</code> creation<br/>
  641. This method updates the cluster node.<br><br> Example:
  642. <code>network.clustering.updateClusteredNode(clusteredNodeId, {shape : 'star'});</code>
  643. </td>
  644. </tr>
  645. <tr class="collapsible toggle" onclick="toggleTable('methodTable','isCluster', this);">
  646. <td colspan="2"><span parent="isCluster" class="right-caret" id="method_isCluster"></span> isCluster(
  647. <code>String nodeId</code>)
  648. </tr>
  649. <tr class="hidden" parent="isCluster">
  650. <td class="midMethods">Returns: Boolean</td>
  651. <td>Returns true if the node whose ID has been supplied is a cluster.</td>
  652. </tr>
  653. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodesInCluster', this);">
  654. <td colspan="2"><span parent="getNodesInCluster" class="right-caret" id="method_getNodesInCluster"></span> getNodesInCluster(
  655. <code>String clusterNodeId</code>)
  656. </tr>
  657. <tr class="hidden" parent="getNodesInCluster">
  658. <td class="midMethods">Returns: Array</td>
  659. <td>Returns an array of all nodeIds of the nodes that would be released if you open the cluster.
  660. </td>
  661. </tr>
  662. <tr class="collapsible toggle" onclick="toggleTable('methodTable','openCluster', this);">
  663. <td colspan="2"><span parent="openCluster" class="right-caret" id="method_openCluster"></span> openCluster(
  664. <code>String nodeId, Object options</code>)
  665. </tr>
  666. <tr class="hidden" parent="openCluster">
  667. <td class="midMethods">Returns: none</td>
  668. <td>Opens the cluster, releases the contained nodes and edges, removing the cluster node and cluster
  669. edges. The options object is optional and currently supports one option, releaseFunction, which is a function that can be used to manually
  670. position the nodes after the cluster is opened. <br>
  671. <pre class="code">
  672. function releaseFunction (clusterPosition, containedNodesPositions) {
  673. var newPositions = {};
  674. // clusterPosition = {x:clusterX, y:clusterY};
  675. // containedNodesPositions = {nodeId:{x:nodeX,y:nodeY}, nodeId2....}
  676. newPositions[nodeId] = {x:newPosX, y:newPosY};
  677. return newPositions;
  678. }</pre>
  679. The containedNodesPositions contain the positions of the nodes in the cluster at the moment they were clustered.
  680. This function is expected to return the newPositions, which can be the containedNodesPositions (altered) or a new object. This has to be an object with keys equal
  681. to the nodeIds that exist in the containedNodesPositions and an <code>{x:x,y:y}</code> position object. <br><br>
  682. For all nodeIds not listed in this returned object, we will position them at the location of the cluster. This is also the default behaviour when no releaseFunction is defined.
  683. </td>
  684. </tr>
  685. <tr id="methodLayout" class="subHeader">
  686. <td colspan="2">Layout</td>
  687. </tr>
  688. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSeed', this);">
  689. <td colspan="2"><span parent="getSeed" class="right-caret" id="method_getSeed"></span> getSeed()</td>
  690. </tr>
  691. <tr class="hidden" parent="clusterByHubsize">
  692. </tr>
  693. <tr class="hidden" parent="getSeed">
  694. <td class="midMethods">Returns: Number</td>
  695. <td>If you like the layout of your network and would like it to start in the same way next time, ask for
  696. the
  697. seed using this method and put it in the <code>layout.randomSeed</code> option.
  698. </td>
  699. </tr>
  700. <tr id="methodManipulation" class="subHeader">
  701. <td colspan="2">Manipulation methods to use the manipulation system without GUI.</td>
  702. </tr>
  703. <tr class="collapsible toggle" onclick="toggleTable('methodTable','enableEditMode', this);">
  704. <td colspan="2"><span parent="enableEditMode" class="right-caret" id="method_enableEditMode"></span> enableEditMode()</td>
  705. </tr>
  706. <tr class="hidden" parent="enableEditMode">
  707. <td class="midMethods">Returns: none</td>
  708. <td>Programatically enable the edit mode. Similar effect to pressing the edit button.</td>
  709. </tr>
  710. <tr class="collapsible toggle" onclick="toggleTable('methodTable','disableEditMode', this);">
  711. <td colspan="2"><span parent="disableEditMode" class="right-caret" id="method_disableEditMode"></span> disableEditMode()</td>
  712. </tr>
  713. <tr class="hidden" parent="disableEditMode">
  714. <td class="midMethods">Returns: none</td>
  715. <td>Programatically disable the edit mode. Similar effect to pressing the close icon (small cross in the
  716. corner of the toolbar).
  717. </td>
  718. </tr>
  719. <tr class="collapsible toggle" onclick="toggleTable('methodTable','addNodeMode', this);">
  720. <td colspan="2"><span parent="addNodeMode" class="right-caret" id="method_addNodeMode"></span> addNodeMode()</td>
  721. </tr>
  722. <tr class="hidden" parent="addNodeMode">
  723. <td class="midMethods">Returns: none</td>
  724. <td>Go into addNode mode. Having edit mode or manipulation enabled is not required. To get out of this
  725. mode,
  726. call <code>disableEditMode()</code>. The callback functions defined in <code>handlerFunctions</code>
  727. still apply. To use these methods without having the manipulation GUI, make sure you set
  728. <code>enabled</code> to false.
  729. </td>
  730. </tr>
  731. <tr class="collapsible toggle" onclick="toggleTable('methodTable','editNode', this);">
  732. <td colspan="2"><span parent="editNode" class="right-caret" id="method_editNode"></span> editNode()</td>
  733. </tr>
  734. <tr class="hidden" parent="editNode">
  735. <td class="midMethods">Returns: none</td>
  736. <td>Edit the selected node. The explaination from <code>addNodeMode</code> applies here as well.</td>
  737. </tr>
  738. <tr class="collapsible toggle" onclick="toggleTable('methodTable','addEdgeMode', this);">
  739. <td colspan="2"><span parent="addEdgeMode" class="right-caret" id="method_addEdgeMode"></span> addEdgeMode()</td>
  740. </tr>
  741. <tr class="hidden" parent="addEdgeMode">
  742. <td class="midMethods">Returns: none</td>
  743. <td>Go into addEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td>
  744. </tr>
  745. <tr class="collapsible toggle" onclick="toggleTable('methodTable','editEdgeMode', this);">
  746. <td colspan="2"><span parent="editEdgeMode" class="right-caret" id="method_editEdgeMode"></span> editEdgeMode()</td>
  747. </tr>
  748. <tr class="hidden" parent="editEdgeMode">
  749. <td class="midMethods">Returns: none</td>
  750. <td>Go into editEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td>
  751. </tr>
  752. <tr class="collapsible toggle" onclick="toggleTable('methodTable','deleteSelected', this);">
  753. <td colspan="2"><span parent="deleteSelected" class="right-caret" id="method_deleteSelected"></span> deleteSelected()</td>
  754. </tr>
  755. <tr class="hidden" parent="deleteSelected">
  756. <td class="midMethods">Returns: none</td>
  757. <td>Delete selected. Having edit mode or manipulation enabled is not required.</td>
  758. </tr>
  759. <tr id="methodInformation" class="subHeader">
  760. <td colspan="2">Methods to get information on nodes and edges.</td>
  761. </tr>
  762. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getPositions', this);">
  763. <td colspan="2"><span parent="getPositions" class="right-caret" id="method_getPositions"></span> getPositions(<code><i>[Array of
  764. nodeIds]</i></code>)
  765. </td>
  766. </tr>
  767. <tr class="hidden" parent="getPositions">
  768. <td class="midMethods">Returns: Object</td>
  769. <td>Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object:
  770. <pre class="code">
  771. {
  772. nodeId1: {x: xValue, y:yValue},
  773. nodeId2: {x: xValue, y:yValue},
  774. ...
  775. }
  776. </pre>
  777. Alternative inputs are a String containing a nodeId or nothing. When a String is supplied, the
  778. position
  779. of the node corresponding to the ID is returned. When nothing is supplied, the positions of all
  780. nodes
  781. are returned.
  782. </td>
  783. </tr>
  784. <tr class="collapsible toggle" onclick="toggleTable('methodTable','storePositions', this);">
  785. <td colspan="2"><span parent="storePositions" class="right-caret" id="method_storePositions"></span> storePositions()</td>
  786. </tr>
  787. <tr class="hidden" parent="storePositions">
  788. <td class="midMethods">Returns: none</td>
  789. <td>When using the vis.DataSet to load your nodes into the network, this method will put the X and Y
  790. positions of all nodes into that dataset. If you're loading your nodes from a database and have
  791. this dynamically coupled with
  792. the DataSet, you can
  793. use this to stablize your network once, then save the positions in that database through the DataSet
  794. so
  795. the next
  796. time you load the nodes, stabilization will be near instantaneous.
  797. <br><br>
  798. If the nodes are still moving and you're using dynamic smooth edges (which is on by default), you
  799. can
  800. use the option <code>stabilization.onlyDynamicEdges</code> in the <a href="physics.html">physics
  801. module</a>
  802. to improve initialization time.
  803. <br><br>
  804. <b>This method does not support clustering. At the moment it is not possible to cache
  805. positions when using clusters since they cannot be correctly initialized from just the
  806. positions.</b>
  807. </td>
  808. </tr>
  809. <tr class="collapsible toggle" onclick="toggleTable('methodTable','moveNode', this);">
  810. <td colspan="2"><span parent="moveNode" class="right-caret" id="method_moveNode"></span> moveNode(<code><i>nodeId, Number x, Number y</i></code>)</td>
  811. </tr>
  812. <tr class="hidden" parent="moveNode">
  813. <td class="midMethods">Returns: none</td>
  814. <td>You can use this to programatically move a node. <i>The supplied x and y positions have to be in canvas space!</i>
  815. </td>
  816. </tr>
  817. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBoundingBox', this);">
  818. <td colspan="2"><span parent="getBoundingBox" class="right-caret" id="method_getBoundingBox"></span> getBoundingBox(<code><i>String
  819. nodeId</i></code>)
  820. </td>
  821. </tr>
  822. <tr class="hidden" parent="getBoundingBox">
  823. <td class="midMethods">Returns: Object</td>
  824. <td> Returns a bounding box for the node including label in the format:
  825. <pre class="code">
  826. {
  827. top: Number,
  828. left: Number,
  829. right: Number,
  830. bottom: Number
  831. }
  832. </pre>
  833. These values are in canvas space.
  834. </td>
  835. </tr>
  836. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedNodes', this);">
  837. <td colspan="2"><span parent="getConnectedNodes" class="right-caret" id="method_getConnectedNodes"></span> getConnectedNodes(<code><i>String
  838. nodeId or edgeId, [String direction]</i></code>)
  839. </td>
  840. </tr>
  841. <tr class="hidden" parent="getConnectedNodes">
  842. <td class="midMethods">Returns: Array</td>
  843. <td>Returns an array of nodeIds of all the nodes that are directly connected to this node or edge.<br><br>
  844. For a node id, returns an array with the id's of the connected nodes.<br>
  845. If optional parameter <code>direction</code> is set to string <i>'from'</i>, only parent nodes are returned.<br>
  846. If <code>direction</code> is set to <i>'to'</i>, only child nodes are returned.<br>
  847. Any other value or <code>undefined</code> returns both parent and child nodes.
  848. <br><br>
  849. For an edge id, returns an array: <code>[fromId, toId]</code>.
  850. Parameter <i>direction</i> is ignored for edges.</td>
  851. </tr>
  852. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedEdges', this);">
  853. <td colspan="2"><span parent="getConnectedEdges" class="right-caret" id="method_getConnectedEdges"></span> getConnectedEdges(<code><i>String
  854. nodeId</i></code>)
  855. </td>
  856. </tr>
  857. <tr class="hidden" parent="getConnectedEdges">
  858. <td class="midMethods">Returns: Array</td>
  859. <td>Returns an array of edgeIds of the edges connected to this node.</td>
  860. </tr>
  861. <tr id="methodPhysics" class="subHeader">
  862. <td colspan="2">Physics methods to control when the simulation should run.</td>
  863. </tr>
  864. <tr class="collapsible toggle" onclick="toggleTable('methodTable','startSimulation', this);">
  865. <td colspan="2"><span parent="startSimulation" class="right-caret" id="method_startSimulation"></span> startSimulation()</td>
  866. </tr>
  867. <tr class="hidden" parent="startSimulation">
  868. <td class="midMethods">Returns: none</td>
  869. <td>Start the physics simulation. This is normally done whenever needed and is only really useful if you
  870. stop the simulation yourself and wish to continue it afterwards.
  871. </td>
  872. </tr>
  873. <tr class="collapsible toggle" onclick="toggleTable('methodTable','stopSimulation', this);">
  874. <td colspan="2"><span parent="stopSimulation" class="right-caret" id="method_stopSimulation"></span> stopSimulation()</td>
  875. </tr>
  876. <tr class="hidden" parent="stopSimulation">
  877. <td class="midMethods">Returns: none</td>
  878. <td>This stops the physics simulation and triggers a <code>stabilized</code> event. It can be restarted
  879. by
  880. dragging a node, altering the dataset or calling <code>startSimulation()</code>.
  881. </td>
  882. </tr>
  883. <tr class="collapsible toggle" onclick="toggleTable('methodTable','stabilize', this);">
  884. <td colspan="2"><span parent="stabilize" class="right-caret" id="method_stabilize"></span> stabilize([iterations])</td>
  885. </tr>
  886. <tr class="hidden" parent="stabilize">
  887. <td class="midMethods">Returns: none</td>
  888. <td>You can manually call stabilize at any time. All the stabilization options above are used. You can optionally supply the number of iterations it should do.</td>
  889. </tr>
  890. <tr id="methodSelection" class="subHeader">
  891. <td colspan="2">Selection methods for nodes and edges.</td>
  892. </tr>
  893. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelection', this);">
  894. <td colspan="2"><span parent="getSelection" class="right-caret" id="method_getSelection"></span> getSelection()</td>
  895. </tr>
  896. <tr class="hidden" parent="getSelection">
  897. <td class="midMethods">Returns: Object</td>
  898. <td>Returns an object with selected nodes and edges ids like this:
  899. <pre class="code">
  900. {
  901. nodes: [Array of selected nodeIds],
  902. edges: [Array of selected edgeIds]
  903. }</pre>
  904. </td>
  905. </tr>
  906. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedNodes', this);">
  907. <td colspan="2"><span parent="getSelectedNodes" class="right-caret" id="method_getSelectedNodes"></span> getSelectedNodes()</td>
  908. </tr>
  909. <tr class="hidden" parent="getSelectedNodes">
  910. <td class="midMethods">Returns: Array</td>
  911. <td>Returns an array of selected node ids like so:
  912. <code>[nodeId1, nodeId2, ..]</code>.
  913. </td>
  914. </tr>
  915. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedEdges', this);">
  916. <td colspan="2"><span parent="getSelectedEdges" class="right-caret" id="method_getSelectedEdges"></span> getSelectedEdges()</td>
  917. </tr>
  918. <tr class="hidden" parent="getSelectedEdges">
  919. <td class="midMethods">Returns: Array</td>
  920. <td>Returns an array of selected edge ids like so: <code>[edgeId1, edgeId2, ..]</code>.</td>
  921. </tr>
  922. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodeAt', this);">
  923. <td colspan="2"><span parent="getNodeAt" class="right-caret" id="method_getNodeAt"></span> getNodeAt(<code><i>{x: xPosition
  924. DOM, y: yPosition DOM}</i></code>)
  925. </td>
  926. </tr>
  927. <tr class="hidden" parent="getNodeAt">
  928. <td class="midMethods">Returns: String</td>
  929. <td>Returns a nodeId or undefined. The DOM positions are expected to be in pixels from the top left
  930. corner
  931. of the canvas.
  932. </td>
  933. </tr>
  934. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getEdgeAt', this);">
  935. <td colspan="2"><span parent="getEdgeAt" class="right-caret" id="method_getEdgeAt"></span> getEdgeAt(<code><i>{x: xPosition
  936. DOM, y: yPosition DOM}</i></code>)
  937. </td>
  938. </tr>
  939. <tr class="hidden" parent="getEdgeAt">
  940. <td class="midMethods">Returns: String</td>
  941. <td>Returns a edgeId or undefined. The DOM positions are expected to be in pixels from the top left
  942. corner
  943. of the canvas..
  944. </td>
  945. </tr>
  946. <tr class="collapsible toggle" onclick="toggleTable('methodTable','selectNodes', this);">
  947. <td colspan="2"><span parent="selectNodes" class="right-caret" id="method_selectNodes"></span> selectNodes(<code><i>Array with
  948. nodeIds</i></code>,<code><i>[Boolean
  949. highlightEdges]</i></code>)
  950. </td>
  951. </tr>
  952. <tr class="hidden" parent="selectNodes">
  953. <td class="midMethods">Returns: none</td>
  954. <td>Selects the nodes corresponding to the id's in the input array. If highlightEdges is true or
  955. undefined,
  956. the neighbouring edges will also be selected. This method unselects all other objects before
  957. selecting
  958. its own objects. <i>Does not fire events</i>.
  959. </td>
  960. </tr>
  961. <tr class="collapsible toggle" onclick="toggleTable('methodTable','selectEdges', this);">
  962. <td colspan="2"><span parent="selectEdges" class="right-caret" id="method_selectEdges"></span> selectEdges(<code><i>Array with
  963. edgeIds</i></code>)
  964. </td>
  965. </tr>
  966. <tr class="hidden" parent="selectEdges">
  967. <td class="midMethods">Returns: none</td>
  968. <td>Selects the edges corresponding to the id's in the input array. This method unselects all other
  969. objects
  970. before selecting its own objects. <i>Does not fire events</i>.
  971. </td>
  972. </tr>
  973. <tr class="collapsible toggle" onclick="toggleTable('methodTable','setSelection', this);">
  974. <td colspan="2"><span parent="setSelection" class="right-caret" id="method_setSelection"></span> setSelection(
  975. <code>Object selection</code>,
  976. <code>[Object options]</code>)</td>
  977. </tr>
  978. <tr class="hidden" parent="setSelection">
  979. <td class="midMethods">Returns: none</td>
  980. <td>Sets the selection, wich must be an object like this:
  981. <pre class="code">
  982. {
  983. nodes: [Array of nodeIds],
  984. edges: [Array of edgeIds]
  985. }</pre>
  986. You can also pass only <code>nodes</code> or <code>edges</code> in <code>selection</code> object.
  987. Available options are:
  988. <pre class="code">
  989. {
  990. unselectAll: Boolean,
  991. highlightEdges: Boolean
  992. }</pre>
  993. </td>
  994. </tr>
  995. <tr class="collapsible toggle" onclick="toggleTable('methodTable','unselectAll', this);">
  996. <td colspan="2"><span parent="unselectAll" class="right-caret" id="method_unselectAll"></span> unselectAll()</td>
  997. </tr>
  998. <tr class="hidden" parent="unselectAll">
  999. <td class="midMethods">Returns: none</td>
  1000. <td>Unselect all objects. <i>Does not fire events</i>.</td>
  1001. </tr>
  1002. <tr id="methodViewport" class="subHeader">
  1003. <td colspan="2">Methods to control the viewport for zoom and animation.</td>
  1004. </tr>
  1005. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getScale', this);">
  1006. <td colspan="2"><span parent="getScale" class="right-caret" id="method_getScale"></span> getScale()</td>
  1007. </tr>
  1008. <tr class="hidden" parent="getScale">
  1009. <td class="midMethods">Returns: Number</td>
  1010. <td>Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.
  1011. </td>
  1012. </tr>
  1013. <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);">
  1014. <td colspan="2"><span parent="clusterByHubsize" class="right-caret" id="method_getViewPosition"></span> getViewPosition()</td>
  1015. </tr>
  1016. <tr class="hidden" parent="clusterByHubsize">
  1017. <td class="midMethods">Returns: Object</td>
  1018. <td>Returns the current central focus point of the view in the form: <code>{ x: {Number}, y: {Number} }</code></td>
  1019. </tr>
  1020. <tr class="collapsible toggle" onclick="toggleTable('methodTable','fit', this);">
  1021. <td colspan="2"><span parent="fit" class="right-caret" id="method_fit"></span> fit(<code>[Object
  1022. options]</code>)
  1023. </td>
  1024. </tr>
  1025. <tr class="hidden" parent="fit">
  1026. <td class="midMethods">Returns: none</td>
  1027. <td>Zooms out so all nodes fit on the canvas. You can supply options to customize this:
  1028. <pre class="code">
  1029. {
  1030. nodes:[Array of nodeIds],
  1031. animation: { // -------------------> can be a boolean too!
  1032. duration: Number
  1033. easingFunction: String
  1034. }
  1035. }
  1036. </pre>
  1037. The nodes can be used to zoom to fit only specific nodes in the view. <br/><br/>
  1038. The other options are explained in the <code>moveTo()</code> description below.
  1039. All options are optional for the fit method.
  1040. </td>
  1041. </tr>
  1042. <tr class="collapsible toggle" onclick="toggleTable('methodTable','focus', this);">
  1043. <td colspan="2"><span parent="focus" class="right-caret" id="method_focus"></span> focus(
  1044. <code>String nodeId</code>,
  1045. <code>[Object options]</code>)
  1046. </td>
  1047. </tr>
  1048. <tr class="hidden" parent="focus">
  1049. <td class="midMethods">Returns: none</td>
  1050. <td>You can focus on a node with this function. What that means is the view will lock onto that node, if
  1051. it
  1052. is moving, the view will also move accordingly. If the view is dragged by the user, the focus is
  1053. broken.
  1054. You can supply options to customize the effect:
  1055. <pre class="code">
  1056. {
  1057. scale: Number,
  1058. offset: {x:Number, y:Number}
  1059. locked: boolean
  1060. animation: { // -------------------> can be a boolean too!
  1061. duration: Number
  1062. easingFunction: String
  1063. }
  1064. }
  1065. </pre>
  1066. All options except for locked are explained in the <code>moveTo()</code> description below. Locked
  1067. denotes whether or not the view remains locked to the node once the zoom-in animation is finished.
  1068. Default value is true. The options object is optional in the focus method.
  1069. </td>
  1070. </tr>
  1071. <tr class="collapsible toggle" onclick="toggleTable('methodTable','moveTo', this);">
  1072. <td colspan="2"><span parent="moveTo" class="right-caret" id="method_moveTo"></span> moveTo(<code>Object
  1073. options</code>)
  1074. </td>
  1075. </tr>
  1076. <tr class="hidden" parent="moveTo">
  1077. <td class="midMethods">Returns: none</td>
  1078. <td>You can animate or move the camera using the moveTo method. Options are:
  1079. <pre class="code">
  1080. {
  1081. position: {x:Number, y:Number},
  1082. scale: Number,
  1083. offset: {x:Number, y:Number}
  1084. animation: { // -------------------> can be a boolean too!
  1085. duration: Number
  1086. easingFunction: String
  1087. }
  1088. }
  1089. </pre>
  1090. The position (in canvas units!) is the position of the central focus point of the camera.
  1091. The scale is the target zoomlevel. Default value is 1.0.
  1092. The offset (in DOM units) is how many pixels from the center the view is focussed. Default value is
  1093. {x:0,y:0}.
  1094. For animation you can either use a Boolean to use it with the default options or disable it or you
  1095. can
  1096. define the duration (in milliseconds) and easing function manually. Available are:
  1097. <code>linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic,
  1098. easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint</code>.
  1099. <i>You will have to define at least a scale, position or offset. Otherwise, there is nothing to move
  1100. to.</i>
  1101. </td>
  1102. </tr>
  1103. <tr class="collapsible toggle" onclick="toggleTable('methodTable','releaseNode', this);">
  1104. <td colspan="2"><span parent="releaseNode" class="right-caret" id="method_releaseNode"></span> releaseNode()</td>
  1105. </tr>
  1106. <tr class="hidden" parent="releaseNode">
  1107. <td class="midMethods">Returns: none</td>
  1108. <td>Programatically release the focussed node.</td>
  1109. </tr>
  1110. <tr id="methodConfigurator" class="subHeader">
  1111. <td colspan="2">Methods to use with the configurator module.</td>
  1112. </tr>
  1113. <tr class="collapsible toggle" onclick="toggleTable('methodTable','getOptionsFromConfigurator', this);">
  1114. <td colspan="2"><span parent="getOptionsFromConfigurator" class="right-caret" id="method_getOptionsFromConfigurator"></span> getOptionsFromConfigurator()</td>
  1115. </tr>
  1116. <tr class="hidden" parent="getOptionsFromConfigurator">
  1117. <td class="midMethods">Returns: Object</td>
  1118. <td>If you use the configurator, you can call this method to get an options object that contains all differences from the default options
  1119. caused by users interacting with the configurator.
  1120. </td>
  1121. </tr>
  1122. </table>
  1123. <br>
  1124. <br>
  1125. <h4 id="optionsObject">Cluster methods options object</h4>
  1126. <p>The options object supplied to the cluster functions can contain these properties:</p>
  1127. <table class="methods">
  1128. <tr>
  1129. <th>Name</th>
  1130. <th>Type</th>
  1131. <th>Description</th>
  1132. </tr>
  1133. <tr><td>joinCondition(<br>&nbsp;&nbsp;<code>nodeOptions:&nbsp;Object</code><br>)<br>or<br>joinCondition(<br>&nbsp;&nbsp;<code>parentNodeOptions:&nbsp;Object,</code><br>&nbsp;&nbsp;<code>childNodeOptions:&nbsp;Object</code><br>)</td>
  1134. <td>Function</td>
  1135. <td><i>Optional for all but the cluster method. </i> <br>
  1136. <code>clusterByConnection</code> is the only function that will pass 2 nodeOptions objects as arguments to the joinCondition callback.<br>
  1137. The cluster module loops over all nodes that are
  1138. selected to be in the cluster and calls this function with their data as argument.
  1139. If this function returns true, this node will be added to the cluster. You have access to all
  1140. options
  1141. (including the default)
  1142. as well as any custom fields you may have added to the node to determine whether or not to include
  1143. it in
  1144. the cluster. Example:
  1145. <pre class="prettyprint lang-js">
  1146. var nodes = [
  1147. {id: 4, label: 'Node 4'},
  1148. {id: 5, label: 'Node 5'},
  1149. {id: 6, label: 'Node 6', cid:1},
  1150. {id: 7, label: 'Node 7', cid:1}
  1151. ]
  1152. var options = {
  1153. joinCondition:function(nodeOptions) {
  1154. return nodeOptions.cid === 1;
  1155. }
  1156. }
  1157. network.clustering.cluster(options);
  1158. </pre>
  1159. <code>clusterByConnection</code><b> will pass 2 nodeOptions objects as arguments to the joinCondition callback.</b>
  1160. </td>
  1161. </tr>
  1162. <tr><td>processProperties(<br>&nbsp;&nbsp;<code>clusterOptions:&nbsp;Object</code>,<br>
  1163. &nbsp;&nbsp;<code>childNodesOptions:&nbsp;Array</code>,<br>
  1164. &nbsp;&nbsp;<code>childEdgesOptions:&nbsp;Array</code><br>)</td>
  1165. <td>Function</td>
  1166. <td><i>Optional. </i> Before creating the new cluster node, this (optional) function will be called with
  1167. the
  1168. properties supplied by you (<code>clusterNodeProperties</code>), all contained nodes and all
  1169. contained
  1170. edges. You can use this to update the
  1171. properties of the cluster based on which items it contains. The function should return the
  1172. properties to
  1173. create the cluster node. In the example below, we ensure preservation of mass and value when forming
  1174. the
  1175. cluster:
  1176. <pre class="prettyprint lang-js">
  1177. var options = {
  1178. processProperties: function (clusterOptions,
  1179. childNodes, childEdges) {
  1180. var totalMass = 0;
  1181. var totalValue = 0;
  1182. for (var i = 0; i < childNodes.length; i++) {
  1183. totalMass += childNodes[i].mass;
  1184. totalValue = childNodes[i].value
  1185. ? totalValue + childNodes[i].value
  1186. : totalValue;
  1187. }
  1188. clusterOptions.mass = totalMass;
  1189. if (totalValue > 0) {
  1190. clusterOptions.value = totalValue;
  1191. }
  1192. return clusterOptions;
  1193. },
  1194. }
  1195. </pre>
  1196. </td>
  1197. </tr>
  1198. <tr><td id="event_clusterNodeProperties">clusterNodeProperties</td>
  1199. <td>Object</td>
  1200. <td><i>Optional. </i> This is an object containing the options for the cluster node. All options
  1201. described
  1202. in the <a href="./nodes.html">nodes module</a> are allowed. This allows you to style your cluster
  1203. node
  1204. any way you want. This is also the style object that is provided in the processProperties function
  1205. for
  1206. fine tuning. If undefined, default node options will be used.<br/><br/>
  1207. Default functionality only allows clustering if the cluster will contain 2 or more nodes. To allow clustering of single nodes you can use the <code>allowSingleNodeCluster : true</code> property.
  1208. <pre class="prettyprint lang-js">
  1209. clusterNodeProperties: {
  1210. allowSingleNodeCluster: true
  1211. }
  1212. </pre>
  1213. </td>
  1214. </tr>
  1215. <tr><td id="event_clusterEdgeProperties">clusterEdgeProperties</td>
  1216. <td>Object</td>
  1217. <td><i>Optional. </i> This is an object containing the options for the edges connected to the cluster.
  1218. All
  1219. options described in the <a href="./edges.html">edges module</a> are allowed. Using this, you can
  1220. style
  1221. the edges connecting to the cluster any way you want. If none are provided, the options from the
  1222. edges
  1223. that are replaced are used. If undefined, default edge options will be used.
  1224. </td>
  1225. </tr>
  1226. </table>
  1227. </div>
  1228. <br /><hr />
  1229. <div id="eventsDiv">
  1230. <h2 id="Events">Events</h2>
  1231. <p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
  1232. <p>These events are fired by the interaction module. They are related to user input.</p>
  1233. <table class="events">
  1234. <tr>
  1235. <th>Name</th>
  1236. <th>Properties</th>
  1237. <th>Description</th>
  1238. </tr>
  1239. <tr class="subHeader">
  1240. <td colspan="3">Events triggered by human interaction, selection, dragging etc.</td>
  1241. </tr>
  1242. <tr><td id="event_click">click</td>
  1243. <td>
  1244. Object
  1245. </td>
  1246. <td>Fired when the user clicks the mouse or taps on a touchscreen device. Passes an object with properties structured as:
  1247. <pre class="prettyprint lang-js">{
  1248. nodes: [Array of selected nodeIds],
  1249. edges: [Array of selected edgeIds],
  1250. event: [Object] original click event,
  1251. pointer: {
  1252. DOM: {x:pointer_x, y:pointer_y},
  1253. canvas: {x:canvas_x, y:canvas_y}
  1254. }
  1255. }
  1256. </pre>
  1257. This is the structure common to all events. Specifically for the click event, the following property is added:
  1258. <pre class="prettyprint lang-js">{
  1259. ...
  1260. items: [Array of click items],
  1261. }</pre>
  1262. Where the click items can be:
  1263. <pre class="prettyprint lang-js">
  1264. {nodeId:NodeId} // node with given id clicked on
  1265. {nodeId:NodeId labelId:0} // label of node with given id clicked on
  1266. {edgeId:EdgeId} // edge with given id clicked on
  1267. {edge:EdgeId, labelId:0} // label of edge with given id clicked on
  1268. </pre>
  1269. The order of the <code>items</code> array is descending in z-order.
  1270. Thus, to get the topmost item, get the value at index 0.
  1271. </td>
  1272. </tr>
  1273. <tr><td id="event_doubleClick">doubleClick</td>
  1274. <td>same as <code>click</code>.</td>
  1275. <td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double
  1276. click
  1277. is in fact 2 clicks, 2 click events are fired, followed by a double click event. If you do not want
  1278. to
  1279. use the click events if a double click event is fired, just check the time between click events
  1280. before
  1281. processing them.
  1282. </td>
  1283. </tr>
  1284. <tr><td id="event_oncontext">oncontext</td>
  1285. <td>same as <code>click</code>.</td>
  1286. <td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not
  1287. select by default. You can use the method <code>getNodeAt</code> to select the node if you
  1288. want.
  1289. </td>
  1290. </tr>
  1291. <tr><td id="event_hold">hold</td>
  1292. <td>same as <code>click</code>.</td>
  1293. <td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click
  1294. event
  1295. is also fired in this case.
  1296. </td>
  1297. </tr>
  1298. <tr><td id="event_release">release</td>
  1299. <td>same as <code>click</code>.</td>
  1300. <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
  1301. </td>
  1302. </tr>
  1303. <tr><td id="event_select">select</td>
  1304. <td>same as <code>click</code>.</td>
  1305. <td>Fired when the selection has changed by user action. This means a node or edge has been selected,
  1306. added
  1307. to the selection or deselected. <b>All select events are only triggered on click and hold</b>.
  1308. </td>
  1309. </tr>
  1310. <tr><td id="event_selectNode">selectNode</td>
  1311. <td>same as <code>click</code>.</td>
  1312. <td>Fired when a node has been selected by the user.</td>
  1313. </tr>
  1314. <tr><td id="event_selectEdge">selectEdge</td>
  1315. <td>same as <code>click</code>.</td>
  1316. <td>Fired when a edge has been selected by the user.</td>
  1317. </tr>
  1318. <tr><td id="event_deselectNode">deselectNode</td>
  1319. <td>Object
  1320. </td>
  1321. <td>Fired when a node (or nodes) has (or have) been deselected by the user. The previous selection is the list of nodes and edges that were selected before the last user event. Passes an object with properties structured as:
  1322. <pre class="prettyprint lang-js">{
  1323. nodes: [Array of selected nodeIds],
  1324. edges: [Array of selected edgeIds],
  1325. event: [Object] original click event,
  1326. pointer: {
  1327. DOM: {x:pointer_x, y:pointer_y},
  1328. canvas: {x:canvas_x, y:canvas_y}
  1329. }
  1330. },
  1331. previousSelection: {
  1332. nodes: [Array of previously selected nodeIds],
  1333. edges: [Array of previously selected edgeIds]
  1334. }
  1335. }
  1336. </pre>
  1337. </td>
  1338. </tr>
  1339. <tr><td id="event_deselectEdge">deselectEdge</td>
  1340. <td>same as <code>deselectNode</code>.</td>
  1341. <td>Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is
  1342. the
  1343. list of nodes and edges that were selected before the last user event.
  1344. </td>
  1345. </tr>
  1346. <tr><td id="event_dragStart">dragStart</td>
  1347. <td>same as <code>click</code>.</td>
  1348. <td>Fired when starting a drag.</td>
  1349. </tr>
  1350. <tr><td id="event_dragging">dragging</td>
  1351. <td>same as <code>click</code>.</td>
  1352. <td>Fired when dragging node(s) or the view.</td>
  1353. </tr>
  1354. <tr><td id="event_dragEnd">dragEnd</td>
  1355. <td>same as <code>click</code>.</td>
  1356. <td>Fired when the drag has finished.</td>
  1357. </tr>
  1358. <tr><td id="event_hoverNode">hoverNode</td>
  1359. <td><code>{node: nodeId}</code></td>
  1360. <td>Fired if the option <code>interaction:{hover:true}</code> is enabled and the mouse hovers over a node.</td>
  1361. </tr>
  1362. <tr><td id="event_blurNode">blurNode</td>
  1363. <td><code>{node: nodeId}</code></td>
  1364. <td>Fired if the option <code>interaction:{hover:true}</code> is enabled and the mouse moved away from a node it was hovering over before.</td>
  1365. </tr>
  1366. <tr><td id="event_hoverEdge">hoverEdge</td>
  1367. <td><code>{edge: edgeId}</code></td>
  1368. <td>Fired if the option <code>interaction:{hover:true}</code> is enabled and the mouse hovers over an edge.</td>
  1369. </tr>
  1370. <tr><td id="event_blurEdge">blurEdge</td>
  1371. <td><code>{edge: edgeId}</code></td>
  1372. <td>Fired if the option <code>interaction:{hover:true}</code> is enabled and the mouse moved away from an edge it was hovering over before.</td>
  1373. </tr>
  1374. <tr><td id="event_zoom">zoom</td>
  1375. <td>Object</td>
  1376. <td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale(). When fired by clicking the zoom in or zoom out navigation buttons, the pointer property of the object passed will be null. Passes an object with properties structured as:
  1377. <pre class="prettyprint lang-js">{
  1378. direction: '+'/'-',
  1379. scale: Number,
  1380. pointer: {x:pointer_x, y:pointer_y}
  1381. }
  1382. </pre></td>
  1383. </tr>
  1384. <tr><td id="event_showPopup">showPopup</td>
  1385. <td><code>id of item corresponding to popup</code></td>
  1386. <td>Fired when the popup (tooltip) is shown.</td>
  1387. </tr>
  1388. <tr><td id="event_hidePopup">hidePopup</td>
  1389. <td>none</td>
  1390. <td>Fired when the popup (tooltip) is hidden.</td>
  1391. </tr>
  1392. <tr class="subHeader ">
  1393. <td colspan="3">Events triggered the physics simulation. Can be used to trigger GUI updates.</td>
  1394. </tr>
  1395. <tr><td id="event_startStabilizing">startStabilizing</td>
  1396. <td>none</td>
  1397. <td>Fired when stabilization starts. This is also the case when you drag a node and the physics
  1398. simulation
  1399. restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'.
  1400. </td>
  1401. <tr><td id="event_stabilizationProgress">stabilizationProgress</td>
  1402. <td>Object</td>
  1403. <td>Fired when a multiple of the <code>updateInterval</code> number of iterations is reached. This only occurs in the 'hidden' stabilization. Passes an object with properties structured as:
  1404. <pre class="prettyprint lang-js">{
  1405. iterations: Number // iterations so far,
  1406. total: Number // total iterations in options
  1407. }</pre>
  1408. </td>
  1409. </tr>
  1410. <tr><td id="event_stabilizationIterationsDone">stabilizationIterationsDone</td>
  1411. <td>none</td>
  1412. <td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is stabilized; it could also mean that the amount of iterations defined in the options has been reached.
  1413. </td>
  1414. <tr><td id="event_stabilized">stabilized</td>
  1415. <td>Object</td>
  1416. <td>Fired when the network has stabilized or when the <code>stopSimulation()</code> has been called. The amount of iterations it took could be used to tweak the maximum amount of iterations needed to stabilize the network. Passes an object with properties structured as:
  1417. <pre class="prettyprint lang-js">{
  1418. iterations: Number // iterations it took
  1419. }</pre>
  1420. </td>
  1421. <tr class="subHeader">
  1422. <td colspan="3">Event triggered by the canvas.</td>
  1423. </tr>
  1424. <tr><td id="event_resize">resize</td>
  1425. <td>Object</td>
  1426. <td>Fired when the size of the canvas has been resized, either by a redraw call when the container div has changed in size, a setSize() call with new values or a setOptions() with new width and/or height values. Passes an object with properties structured as:
  1427. <pre class="prettyprint lang-js">
  1428. {
  1429. width: Number // the new width of the canvas
  1430. height: Number // the new height of the canvas
  1431. oldWidth: Number // the old width of the canvas
  1432. oldHeight: Number // the old height of the canvas
  1433. }
  1434. </pre>
  1435. </td>
  1436. </tr>
  1437. <tr class="subHeader ">
  1438. <td colspan="3">Events triggered by the rendering module. Can be used to draw custom elements on the
  1439. canvas.
  1440. </td>
  1441. </tr>
  1442. <tr><td id="event_initRedraw">initRedraw</td>
  1443. <td>none</td>
  1444. <td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to
  1445. move
  1446. custom elements before starting drawing the new frame.
  1447. </td>
  1448. <tr><td id="event_beforeDrawing">beforeDrawing</td>
  1449. <td><code>canvas context</code></td>
  1450. <td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before
  1451. all
  1452. edges and nodes are drawn. Can be used to draw behind the network.
  1453. </td>
  1454. <tr><td id="event_afterDrawing">afterDrawing</td>
  1455. <td><code>canvas context</code></td>
  1456. <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
  1457. </td>
  1458. </tr>
  1459. <tr class="subHeader">
  1460. <td colspan="3">Event triggered by the view module.</td>
  1461. </tr>
  1462. <tr><td id="event_animationFinished">animationFinished</td>
  1463. <td>none</td>
  1464. <td>Fired when an animation is finished.</td>
  1465. </tr>
  1466. <tr class="subHeader">
  1467. <td colspan="3">Event triggered by the configuration module.</td>
  1468. </tr>
  1469. <tr><td id="event_configChange">configChange</td>
  1470. <td>Object</td>
  1471. <td>Fired when a user changes any option in the configurator. The options object can be used with the setOptions method or stringified using JSON.stringify().
  1472. You do not have to manually put the options into the network: this is done automatically. You can use the event
  1473. to store user options in the database.
  1474. </td>
  1475. </tr>
  1476. </table>
  1477. </div>
  1478. <br /><hr />
  1479. <div id="importDiv">
  1480. <h2 id="importing_data">Importing data</h2>
  1481. <p>Network contains conversion utilities to import data from <a href="#importGephi">Gephi</a> and graphs in the <a href="#importDot">DOT language</a>.</p>
  1482. <h3 id="importGephi">Import data from Gephi</h3>
  1483. <p>
  1484. Network can import data straight from an exported json file from gephi. You can get the JSON exporter here:
  1485. <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
  1486. An example exists showing how to get a JSON file into Vis:
  1487. </p>
  1488. <p>
  1489. Example usage:
  1490. </p>
  1491. <pre class="prettyprint lang-js">
  1492. // load the JSON file containing the Gephi network.
  1493. var gephiJSON = loadJSON("./datasources/WorldCup2014.json"); // code in <a href="http://visjs.org/examples/network/data/importingFromGephi.html">importing_from_gephi</a>.
  1494. // you can customize the result like with these options. These are explained below.
  1495. // These are the default options.
  1496. var parserOptions = {
  1497. edges: {
  1498. inheritColors: false
  1499. },
  1500. nodes: {
  1501. fixed: true,
  1502. parseColor: false
  1503. }
  1504. }
  1505. // parse the gephi file to receive an object
  1506. // containing nodes and edges in vis format.
  1507. var parsed = vis.network.convertGephi(gephiJSON, parserOptions);
  1508. // provide data in the normal fashion
  1509. var data = {
  1510. nodes: parsed.nodes,
  1511. edged: parsed.edges
  1512. };
  1513. // create a network
  1514. var network = new vis.Network(container, data);
  1515. </pre>
  1516. <br>
  1517. <h4>Gephi parser options</h4>
  1518. There are a few options you can use to tell Vis what to do with the data from Gephi.
  1519. <table class="options">
  1520. <tr>
  1521. <th>Name</th>
  1522. <th>Type</th>
  1523. <th>Default</th>
  1524. <th>Description</th>
  1525. </tr>
  1526. <tr><td>nodes.fixed</td>
  1527. <td>Boolean</td>
  1528. <td><code>true</code></td>
  1529. <td>When false, the nodes will move according to the physics model after import. If true, the nodes do
  1530. not move at all. If set to true, the node positions have to be defined to avoid infinite recursion
  1531. errors in the physics.
  1532. </td>
  1533. </tr>
  1534. <tr><td>nodes.parseColor</td>
  1535. <td>Boolean</td>
  1536. <td><code>false</code></td>
  1537. <td>If true, the color will be parsed by the vis parser, generating extra colors for the borders,
  1538. highlighs and hover. If false, the node will be the supplied color.
  1539. </td>
  1540. </tr>
  1541. <tr><td>edges.inheritColor</td>
  1542. <td>Boolean</td>
  1543. <td><code>false</code></td>
  1544. <td>When true, the color supplied by gephi is ignored and the inherit color mode is used with the global
  1545. setting.
  1546. </td>
  1547. </tr>
  1548. </table>
  1549. <h3 id="importDot">Import data in DOT language</h3>
  1550. <p>
  1551. Network supports data in the
  1552. <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
  1553. To use data in the DOT language, you can use the vis.network.convertDot converter to transform the DOT
  1554. language
  1555. into a vis.Network compatible nodes, edges and options objects. You can extend the options object with other
  1556. options if you'd like.
  1557. </p>
  1558. <p>
  1559. Example usage:
  1560. </p>
  1561. <pre class="prettyprint lang-js">
  1562. // provide data in the DOT language
  1563. var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
  1564. var parsedData = vis.network.convertDot(DOTstring);
  1565. var data = {
  1566. nodes: parsedData.nodes,
  1567. edges: parsedData.edges
  1568. }
  1569. var options = parsedData.options;
  1570. // you can extend the options like a normal JSON variable:
  1571. options.nodes = {
  1572. color: 'red'
  1573. }
  1574. // create a network
  1575. var network = new vis.Network(container, data, options);
  1576. </pre>
  1577. </div>
  1578. </div>
  1579. <!-- Bootstrap core JavaScript
  1580. ================================================== -->
  1581. <!-- Placed at the end of the document so the pages load faster -->
  1582. <script src="../js/jquery.min.js"></script>
  1583. <script src="../js/bootstrap.min.js"></script>
  1584. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  1585. <script src="../js/ie10-viewport-bug-workaround.js"></script>
  1586. <!-- jquery extensions -->
  1587. <script src="../js/jquery.highlight.js"></script>
  1588. <script src="../js/jquery.url.min.js"></script>
  1589. <!-- Tipue vendor js -->
  1590. <script src="../js/tipuesearch.config.js"></script>
  1591. <script src="../js/tipuesearch.js"></script>
  1592. <!-- controller -->
  1593. <script src="../js/main.js"></script>