Browse Source

polising the network docs a little

flowchartTest
Alex de Mulder 9 years ago
parent
commit
5c411a9366
2 changed files with 116 additions and 164 deletions
  1. +2
    -0
      docs/js/main.js
  2. +114
    -164
      docs/network/index.html

+ 2
- 0
docs/js/main.js View File

@ -15,6 +15,8 @@ function checkInput() {
vis.typingTimeout = setTimeout(function () {vis.initSiteSearch(true)},200); vis.typingTimeout = setTimeout(function () {vis.initSiteSearch(true)},200);
} }
else { else {
var title = document.title.replace(/(\(.+\) )/g,"");
document.title = title;
document.getElementById("search-results-wrapper").style.display = "none"; document.getElementById("search-results-wrapper").style.display = "none";
} }
} }

+ 114
- 164
docs/network/index.html View File

@ -227,33 +227,33 @@
<td>Generates an interactive option editor with filtering.</td> <td>Generates an interactive option editor with filtering.</td>
</tr> </tr>
<tr> <tr>
<td><a href="./edges.html">edges</a></td>
<td href="./edges.html">edges</a></td>
<td>Handles the creation and deletion of edges and contains the global edge options and styles.</td> <td>Handles the creation and deletion of edges and contains the global edge options and styles.</td>
</tr> </tr>
<tr> <tr>
<td><a href="./groups.html">groups</a></td>
<td href="./groups.html">groups</a></td>
<td>Contains the groups and some options on how to handle nodes with non-existing groups.</td> <td>Contains the groups and some options on how to handle nodes with non-existing groups.</td>
</tr> </tr>
<tr> <tr>
<td><a href="./interaction.html">interaction</a></td>
<td href="./interaction.html">interaction</a></td>
<td>Used for all user interaction with the network. Handles mouse and touch events and selection as well as <td>Used for all user interaction with the network. Handles mouse and touch events and selection as well as
the navigation buttons and the popups. the navigation buttons and the popups.
</td> </td>
</tr> </tr>
<tr> <tr>
<td><a href="./layout.html">layout</a></td>
<td href="./layout.html">layout</a></td>
<td>Governs the initial and hierarchical positioning.</td> <td>Governs the initial and hierarchical positioning.</td>
</tr> </tr>
<tr> <tr>
<td><a href="./manipulation.html">manipulation</a></td>
<td href="./manipulation.html">manipulation</a></td>
<td>Supplies an API and optional GUI to alter the data in the network.</td> <td>Supplies an API and optional GUI to alter the data in the network.</td>
</tr> </tr>
<tr> <tr>
<td><a href="./nodes.html">nodes</a></td>
<td href="./nodes.html">nodes</a></td>
<td>Handles the creation and deletion of nodes and contains the global node options and styles.</td> <td>Handles the creation and deletion of nodes and contains the global node options and styles.</td>
</tr> </tr>
<tr> <tr>
<td><a href="./physics.html">physics</a></td>
<td href="./physics.html">physics</a></td>
<td>Does all the simulation moving the nodes and edges to their final positions, also governs <td>Does all the simulation moving the nodes and edges to their final positions, also governs
stabilization. stabilization.
</td> </td>
@ -294,8 +294,7 @@ network.setOptions(options);
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>autoResize</td>
<tr><td id="event_autoResize">autoResize</td>
<td>Boolean</td> <td>Boolean</td>
<td><code>true</code></td> <td><code>true</code></td>
<td>If true, the Network will automatically detect when its container is resized, and redraw itself <td>If true, the Network will automatically detect when its container is resized, and redraw itself
@ -303,20 +302,17 @@ network.setOptions(options);
using the function redraw() and setSize(). using the function redraw() and setSize().
</td> </td>
</tr> </tr>
<tr>
<td>width</td>
<tr><td id="event_width">width</td>
<td>String</td> <td>String</td>
<td><code>'100%'</code></td> <td><code>'100%'</code></td>
<td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td> <td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
</tr> </tr>
<tr>
<td>height</td>
<tr><td id="event_height">height</td>
<td>String</td> <td>String</td>
<td><code>'100%'</code></td> <td><code>'100%'</code></td>
<td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td> <td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
</tr> </tr>
<tr>
<td>locale</td>
<tr><td id="event_locale">locale</td>
<td>String</td> <td>String</td>
<td><code>'en'</code></td> <td><code>'en'</code></td>
<td>Select the locale. By default, the language is English. If you want to use another language, you <td>Select the locale. By default, the language is English. If you want to use another language, you
@ -324,8 +320,7 @@ network.setOptions(options);
need to define your own locale and refer to it here. need to define your own locale and refer to it here.
</td> </td>
</tr> </tr>
<tr>
<td>locales</td>
<tr><td id="event_locales">locales</td>
<td>Object</td> <td>Object</td>
<td>defaultLocales</td> <td>defaultLocales</td>
<td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look <td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look
@ -335,8 +330,7 @@ network.setOptions(options);
section below</a> for more explaination on how to customize this. section below</a> for more explaination on how to customize this.
</td> </td>
</tr> </tr>
<tr>
<td>clickToUse</td>
<tr><td id="event_clickToUse">clickToUse</td>
<td>Boolean</td> <td>Boolean</td>
<td>false</td> <td>false</td>
<td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look <td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look
@ -346,60 +340,52 @@ network.setOptions(options);
section below</a> for more explaination on how to customize this. section below</a> for more explaination on how to customize this.
</td> </td>
</tr> </tr>
<tr>
<td>configure</td>
<tr><td id="event_configure">configure</td>
<td>Object</td> <td>Object</td>
<td>Object</td> <td>Object</td>
<td><a href="./configure.html">All options in this object are explained in the configure module.</a>
<td href="./configure.html">All options in this object are explained in the configure module.</a>
</td> </td>
</tr> </tr>
<tr>
<td>edges</td>
<tr><td id="event_edges">edges</td>
<td>Object</td> <td>Object</td>
<td>Object</td> <td>Object</td>
<td><a href="./edges.html">All options in this object are explained in the edges module.</a>
<td href="./edges.html">All options in this object are explained in the edges module.</a>
</td> </td>
</tr> </tr>
<tr>
<td>nodes</td>
<tr><td id="event_nodes">nodes</td>
<td>Object</td> <td>Object</td>
<td>Object</td> <td>Object</td>
<td><a href="./nodes.html">All options in this object are explained in the nodes module.</a>
<td href="./nodes.html">All options in this object are explained in the nodes module.</a>
</td> </td>
</tr> </tr>
<tr>
<td>groups</td>
<tr><td id="event_groups">groups</td>
<td>Object</td> <td>Object</td>
<td>Object</td> <td>Object</td>
<td><a href="./groups.html">All options in this object are explained in the groups module.</a>
<td href="./groups.html">All options in this object are explained in the groups module.</a>
</td> </td>
</tr> </tr>
<tr>
<td>layout</td>
<tr><td id="event_layout">layout</td>
<td>Object</td> <td>Object</td>
<td>Object</td> <td>Object</td>
<td><a href="./layout.html">All options in this object are explained in the layout module.</a>
<td href="./layout.html">All options in this object are explained in the layout module.</a>
</td> </td>
</tr> </tr>
<tr>
<td>interaction</td>
<tr><td id="event_interaction">interaction</td>
<td>Object</td> <td>Object</td>
<td>Object</td> <td>Object</td>
<td><a href="./interaction.html">All options in this object are explained in the interaction module.</a>
<td href="./interaction.html">All options in this object are explained in the interaction module.</a>
</td> </td>
</tr> </tr>
<tr>
<td>manipulation</td>
<tr><td id="event_manipulation">manipulation</td>
<td>Object</td> <td>Object</td>
<td>Object</td> <td>Object</td>
<td><a href="./manipulation.html">All options in this object are explained in the manipulation module.</a>
<td href="./manipulation.html">All options in this object are explained in the manipulation module.</a>
</td> </td>
</tr> </tr>
<tr>
<td>physics</td>
<tr><td id="event_physics">physics</td>
<td>Object</td> <td>Object</td>
<td>Object</td> <td>Object</td>
<td><a href="./physics.html">All options in this object are explained in the physics module.</a>
<td href="./physics.html">All options in this object are explained in the physics module.</a>
</td> </td>
</tr> </tr>
</table> </table>
@ -442,14 +428,14 @@ var locales = {
<td colspan="2">Global methods for the network.</td> <td colspan="2">Global methods for the network.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','destroy', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','destroy', this);">
<td colspan="2"><span parent="destroy" class="right-caret"></span><a id="destroy"></a> destroy()</td>
<td colspan="2"><span parent="destroy" class="right-caret" id="method_destroy"></span> destroy()</td>
</tr> </tr>
<tr class="hidden" parent="destroy"> <tr class="hidden" parent="destroy">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
<td>Remove the network from the DOM and remove all Hammer bindings and references.</td> <td>Remove the network from the DOM and remove all Hammer bindings and references.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','setData', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','setData', this);">
<td colspan="2"><span parent="setData" class="right-caret"></span> setData({<code><i>nodes: vis
<td colspan="2"><span parent="setData" class="right-caret" id="method_setData"></span> setData({<code><i>nodes: vis
DataSet/Array</i></code>,<code><i>edges: vis DataSet/Array</i></code>,<code><i>edges: vis
DataSet/Array</i></code>}) DataSet/Array</i></code>})
</td> </td>
@ -463,7 +449,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','setOptions', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','setOptions', this);">
<td colspan="2"><span parent="setOptions" class="right-caret"></span> setOptions(<code>Object
<td colspan="2"><span parent="setOptions" class="right-caret" id="method_setOptions"></span> setOptions(<code>Object
options</code>) options</code>)
</td> </td>
</tr> </tr>
@ -475,7 +461,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','onEvent', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','onEvent', this);">
<td colspan="2"><span parent="onEvent" class="right-caret"></span> on(<code>String event name, Function callback</code>)
<td colspan="2"><span parent="onEvent" class="right-caret" id="method_on"></span> on(<code>String event name, Function callback</code>)
</td> </td>
</tr> </tr>
<tr class="hidden" parent="onEvent"> <tr class="hidden" parent="onEvent">
@ -484,7 +470,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','offEvent', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','offEvent', this);">
<td colspan="2"><span parent="offEvent" class="right-caret"></span> off(<code>String event name, Function callback</code>)
<td colspan="2"><span parent="offEvent" class="right-caret" id="method_off"></span> off(<code>String event name, Function callback</code>)
</td> </td>
</tr> </tr>
<tr class="hidden" parent="offEvent"> <tr class="hidden" parent="offEvent">
@ -493,7 +479,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','onceEvent', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','onceEvent', this);">
<td colspan="2"><span parent="onceEvent" class="right-caret"></span> once(<code>String event name, Function callback</code>)
<td colspan="2"><span parent="onceEvent" class="right-caret" id="method_once"></span> once(<code>String event name, Function callback</code>)
</td> </td>
</tr> </tr>
<tr class="hidden" parent="onceEvent"> <tr class="hidden" parent="onceEvent">
@ -507,7 +493,7 @@ var locales = {
<td colspan="2">Methods related to the canvas.</td> <td colspan="2">Methods related to the canvas.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','canvasToDOM', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','canvasToDOM', this);">
<td colspan="2"><span parent="canvasToDOM" class="right-caret"></span> canvasToDOM({<code><i>x:
<td colspan="2"><span parent="canvasToDOM" class="right-caret" id="method_canvasToDOM"></span> canvasToDOM({<code><i>x:
Number</i></code>,<code><i>y: Number</i></code>,<code><i>y:
Number</i></code>}) Number</i></code>})
</td> </td>
@ -520,7 +506,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','DOMtoCanvas', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','DOMtoCanvas', this);">
<td colspan="2"><span parent="DOMtoCanvas" class="right-caret"></span> DOMtoCanvas({<code><i>x:
<td colspan="2"><span parent="DOMtoCanvas" class="right-caret" id="method_DOMtoCanvas"></span> DOMtoCanvas({<code><i>x:
Number</i></code>,<code><i>y: Number</i></code>,<code><i>y:
Number</i></code>}) Number</i></code>})
</td> </td>
@ -533,14 +519,14 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','redraw', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','redraw', this);">
<td colspan="2"><span parent="redraw" class="right-caret"></span> redraw()</td>
<td colspan="2"><span parent="redraw" class="right-caret" id="method_redraw"></span> redraw()</td>
</tr> </tr>
<tr class="hidden" parent="redraw"> <tr class="hidden" parent="redraw">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
<td>Redraw the network.</td> <td>Redraw the network.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','setSize', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','setSize', this);">
<td colspan="2"><span parent="setSize" class="right-caret"></span> setSize(<code><i>String
<td colspan="2"><span parent="setSize" class="right-caret" id="method_setSize"></span> setSize(<code><i>String
width</i></code>,<code><i>String width</i></code>,<code><i>String
height</i></code>) height</i></code>)
</td> </td>
@ -554,7 +540,7 @@ var locales = {
<td colspan="2">Clustering</td> <td colspan="2">Clustering</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','cluster', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','cluster', this);">
<td colspan="2"><span parent="cluster" class="right-caret"></span> cluster(
<td colspan="2"><span parent="cluster" class="right-caret" id="method_cluster"></span> cluster(
<code>Object options</code>) <code>Object options</code>)
</td> </td>
</tr> </tr>
@ -568,7 +554,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByConnection', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByConnection', this);">
<td colspan="2"><span parent="clusterByConnection" class="right-caret"></span> clusterByConnection(
<td colspan="2"><span parent="clusterByConnection" class="right-caret" id="method_clusterByConnection"></span> clusterByConnection(
<code>String nodeId</code>, <code>String nodeId</code>,
<code>[Object options]</code> <code>[Object options]</code>
) )
@ -585,7 +571,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);">
<td colspan="2"><span parent="clusterByHubsize" class="right-caret"></span> clusterByHubsize(
<td colspan="2"><span parent="clusterByHubsize" class="right-caret" id="method_clusterByHubsize"></span> clusterByHubsize(
<code>[Number hubsize]</code>, <code>[Number hubsize]</code>,
<code>[Object options]</code>) <code>[Object options]</code>)
</td> </td>
@ -601,7 +587,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterOutliers', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterOutliers', this);">
<td colspan="2"><span parent="clusterOutliers" class="right-caret"></span> clusterOutliers(
<td colspan="2"><span parent="clusterOutliers" class="right-caret" id="method_clusterOutliers"></span> clusterOutliers(
<code>[Object options]</code>) <code>[Object options]</code>)
</tr> </tr>
<tr class="hidden" parent="clusterOutliers"> <tr class="hidden" parent="clusterOutliers">
@ -611,7 +597,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','findNode', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','findNode', this);">
<td colspan="2"><span parent="findNode" class="right-caret"></span> findNode(
<td colspan="2"><span parent="findNode" class="right-caret" id="method_findNode"></span> findNode(
<code>String nodeId</code>) <code>String nodeId</code>)
</tr> </tr>
<tr class="hidden" parent="findNode"> <tr class="hidden" parent="findNode">
@ -626,7 +612,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','isCluster', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','isCluster', this);">
<td colspan="2"><span parent="isCluster" class="right-caret"></span> isCluster(
<td colspan="2"><span parent="isCluster" class="right-caret" id="method_isCluster"></span> isCluster(
<code>String nodeId</code>) <code>String nodeId</code>)
</tr> </tr>
<tr class="hidden" parent="isCluster"> <tr class="hidden" parent="isCluster">
@ -634,7 +620,7 @@ var locales = {
<td>Returns true if the node whose ID has been supplied is a cluster.</td> <td>Returns true if the node whose ID has been supplied is a cluster.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodesInCluster', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodesInCluster', this);">
<td colspan="2"><span parent="getNodesInCluster" class="right-caret"></span> getNodesInCluster(
<td colspan="2"><span parent="getNodesInCluster" class="right-caret" id="method_getNodesInCluster"></span> getNodesInCluster(
<code>String clusterNodeId</code>) <code>String clusterNodeId</code>)
</tr> </tr>
<tr class="hidden" parent="getNodesInCluster"> <tr class="hidden" parent="getNodesInCluster">
@ -643,7 +629,7 @@ var locales = {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','openCluster', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','openCluster', this);">
<td colspan="2"><span parent="openCluster" class="right-caret"></span> openCluster(
<td colspan="2"><span parent="openCluster" class="right-caret" id="method_openCluster"></span> openCluster(
<code>String nodeId, Object options</code>) <code>String nodeId, Object options</code>)
</tr> </tr>
<tr class="hidden" parent="openCluster"> <tr class="hidden" parent="openCluster">
@ -671,7 +657,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<td colspan="2">Layout</td> <td colspan="2">Layout</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getSeed', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSeed', this);">
<td colspan="2"><span parent="getSeed" class="right-caret"></span> getSeed()</td>
<td colspan="2"><span parent="getSeed" class="right-caret" id="method_getSeed"></span> getSeed()</td>
</tr> </tr>
<tr class="hidden" parent="clusterByHubsize"> <tr class="hidden" parent="clusterByHubsize">
</tr> </tr>
@ -688,14 +674,14 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<td colspan="2">Manipulation methods to use the manipulation system without GUI.</td> <td colspan="2">Manipulation methods to use the manipulation system without GUI.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','enableEditMode', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','enableEditMode', this);">
<td colspan="2"><span parent="enableEditMode" class="right-caret"></span> enableEditMode()</td>
<td colspan="2"><span parent="enableEditMode" class="right-caret" id="method_enableEditMode"></span> enableEditMode()</td>
</tr> </tr>
<tr class="hidden" parent="enableEditMode"> <tr class="hidden" parent="enableEditMode">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
<td>Programatically enable the edit mode. Similar effect to pressing the edit button.</td> <td>Programatically enable the edit mode. Similar effect to pressing the edit button.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','disableEditMode', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','disableEditMode', this);">
<td colspan="2"><span parent="disableEditMode" class="right-caret"></span> disableEditMode()</td>
<td colspan="2"><span parent="disableEditMode" class="right-caret" id="method_disableEditMode"></span> disableEditMode()</td>
</tr> </tr>
<tr class="hidden" parent="disableEditMode"> <tr class="hidden" parent="disableEditMode">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
@ -704,7 +690,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','addNodeMode', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','addNodeMode', this);">
<td colspan="2"><span parent="addNodeMode" class="right-caret"></span> addNodeMode()</td>
<td colspan="2"><span parent="addNodeMode" class="right-caret" id="method_addNodeMode"></span> addNodeMode()</td>
</tr> </tr>
<tr class="hidden" parent="addNodeMode"> <tr class="hidden" parent="addNodeMode">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
@ -716,28 +702,28 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','editNode', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','editNode', this);">
<td colspan="2"><span parent="editNode" class="right-caret"></span> editNode()</td>
<td colspan="2"><span parent="editNode" class="right-caret" id="method_editNode"></span> editNode()</td>
</tr> </tr>
<tr class="hidden" parent="editNode"> <tr class="hidden" parent="editNode">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
<td>Edit the selected node. The explaination from <code>addNodeMode</code> applies here as well.</td> <td>Edit the selected node. The explaination from <code>addNodeMode</code> applies here as well.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','addEdgeMode', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','addEdgeMode', this);">
<td colspan="2"><span parent="addEdgeMode" class="right-caret"></span> addEdgeMode()</td>
<td colspan="2"><span parent="addEdgeMode" class="right-caret" id="method_addEdgeMode"></span> addEdgeMode()</td>
</tr> </tr>
<tr class="hidden" parent="addEdgeMode"> <tr class="hidden" parent="addEdgeMode">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
<td>Go into addEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td> <td>Go into addEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','editEdgeMode', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','editEdgeMode', this);">
<td colspan="2"><span parent="editEdgeMode" class="right-caret"></span> editEdgeMode()</td>
<td colspan="2"><span parent="editEdgeMode" class="right-caret" id="method_editEdgeMode"></span> editEdgeMode()</td>
</tr> </tr>
<tr class="hidden" parent="editEdgeMode"> <tr class="hidden" parent="editEdgeMode">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
<td>Go into editEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td> <td>Go into editEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','deleteSelected', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','deleteSelected', this);">
<td colspan="2"><span parent="deleteSelected" class="right-caret"></span> deleteSelected()</td>
<td colspan="2"><span parent="deleteSelected" class="right-caret" id="method_deleteSelected"></span> deleteSelected()</td>
</tr> </tr>
<tr class="hidden" parent="deleteSelected"> <tr class="hidden" parent="deleteSelected">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
@ -749,7 +735,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<td colspan="2">Methods to get information on nodes and edges.</td> <td colspan="2">Methods to get information on nodes and edges.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getPositions', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getPositions', this);">
<td colspan="2"><span parent="getPositions" class="right-caret"></span> getPositions(<code><i>[Array of
<td colspan="2"><span parent="getPositions" class="right-caret" id="method_getPositions"></span> getPositions(<code><i>[Array of
nodeIds]</i></code>) nodeIds]</i></code>)
</td> </td>
</tr> </tr>
@ -771,7 +757,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','storePositions', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','storePositions', this);">
<td colspan="2"><span parent="storePositions" class="right-caret"></span> storePositions()</td>
<td colspan="2"><span parent="storePositions" class="right-caret" id="method_storePositions"></span> storePositions()</td>
</tr> </tr>
<tr class="hidden" parent="storePositions"> <tr class="hidden" parent="storePositions">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
@ -798,7 +784,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getBoundingBox', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBoundingBox', this);">
<td colspan="2"><span parent="getBoundingBox" class="right-caret"></span> getBoundingBox(<code><i>String
<td colspan="2"><span parent="getBoundingBox" class="right-caret" id="method_getBoundingBox"></span> getBoundingBox(<code><i>String
nodeId</i></code>) nodeId</i></code>)
</td> </td>
</tr> </tr>
@ -817,7 +803,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedNodes', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedNodes', this);">
<td colspan="2"><span parent="getConnectedNodes" class="right-caret"></span> getConnectedNodes(<code><i>String
<td colspan="2"><span parent="getConnectedNodes" class="right-caret" id="method_getConnectedNodes"></span> getConnectedNodes(<code><i>String
nodeId or edgeId</i></code>) nodeId or edgeId</i></code>)
</td> </td>
</tr> </tr>
@ -827,7 +813,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
vis will first match the id to nodes. If no match is found, it will search in the edgelist and return an array: <code>[fromId, toId]</code>.</td> vis will first match the id to nodes. If no match is found, it will search in the edgelist and return an array: <code>[fromId, toId]</code>.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedEdges', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedEdges', this);">
<td colspan="2"><span parent="getConnectedEdges" class="right-caret"></span> getConnectedEdges(<code><i>String
<td colspan="2"><span parent="getConnectedEdges" class="right-caret" id="method_getConnectedEdges"></span> getConnectedEdges(<code><i>String
nodeId</i></code>) nodeId</i></code>)
</td> </td>
</tr> </tr>
@ -841,7 +827,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<td colspan="2">Physics methods to control when the simulation should run.</td> <td colspan="2">Physics methods to control when the simulation should run.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','startSimulation', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','startSimulation', this);">
<td colspan="2"><span parent="startSimulation" class="right-caret"></span> startSimulation()</td>
<td colspan="2"><span parent="startSimulation" class="right-caret" id="method_startSimulation"></span> startSimulation()</td>
</tr> </tr>
<tr class="hidden" parent="startSimulation"> <tr class="hidden" parent="startSimulation">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
@ -850,7 +836,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','stopSimulation', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','stopSimulation', this);">
<td colspan="2"><span parent="stopSimulation" class="right-caret"></span> stopSimulation()</td>
<td colspan="2"><span parent="stopSimulation" class="right-caret" id="method_stopSimulation"></span> stopSimulation()</td>
</tr> </tr>
<tr class="hidden" parent="stopSimulation"> <tr class="hidden" parent="stopSimulation">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
@ -860,7 +846,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','stabilize', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','stabilize', this);">
<td colspan="2"><span parent="stabilize" class="right-caret"></span> stabilize([iterations])</td>
<td colspan="2"><span parent="stabilize" class="right-caret" id="method_stabilize"></span> stabilize([iterations])</td>
</tr> </tr>
<tr class="hidden" parent="stabilize"> <tr class="hidden" parent="stabilize">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
@ -872,7 +858,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<td colspan="2">Selection methods for nodes and edges.</td> <td colspan="2">Selection methods for nodes and edges.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelection', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelection', this);">
<td colspan="2"><span parent="getSelection" class="right-caret"></span> getSelection()</td>
<td colspan="2"><span parent="getSelection" class="right-caret" id="method_getSelection"></span> getSelection()</td>
</tr> </tr>
<tr class="hidden" parent="getSelection"> <tr class="hidden" parent="getSelection">
<td class="midMethods">Returns: Object</td> <td class="midMethods">Returns: Object</td>
@ -886,7 +872,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedNodes', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedNodes', this);">
<td colspan="2"><span parent="getSelectedNodes" class="right-caret"></span> getSelectedNodes()</td>
<td colspan="2"><span parent="getSelectedNodes" class="right-caret" id="method_getSelectedNodes"></span> getSelectedNodes()</td>
</tr> </tr>
<tr class="hidden" parent="getSelectedNodes"> <tr class="hidden" parent="getSelectedNodes">
<td class="midMethods">Returns: Array</td> <td class="midMethods">Returns: Array</td>
@ -895,14 +881,14 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedEdges', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedEdges', this);">
<td colspan="2"><span parent="getSelectedEdges" class="right-caret"></span> getSelectedEdges()</td>
<td colspan="2"><span parent="getSelectedEdges" class="right-caret" id="method_getSelectedEdges"></span> getSelectedEdges()</td>
</tr> </tr>
<tr class="hidden" parent="getSelectedEdges"> <tr class="hidden" parent="getSelectedEdges">
<td class="midMethods">Returns: Array</td> <td class="midMethods">Returns: Array</td>
<td>Returns an array of selected edge ids like so: <code>[edgeId1, edgeId2, ..]</code>.</td> <td>Returns an array of selected edge ids like so: <code>[edgeId1, edgeId2, ..]</code>.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodeAt', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodeAt', this);">
<td colspan="2"><span parent="getNodeAt" class="right-caret"></span> getNodeAt(<code><i>{x: xPosition
<td colspan="2"><span parent="getNodeAt" class="right-caret" id="method_getNodeAt"></span> getNodeAt(<code><i>{x: xPosition
DOM, y: yPosition DOM}</i></code>) DOM, y: yPosition DOM}</i></code>)
</td> </td>
</tr> </tr>
@ -914,7 +900,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getEdgeAt', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getEdgeAt', this);">
<td colspan="2"><span parent="getEdgeAt" class="right-caret"></span> getEdgeAt(<code><i>{x: xPosition
<td colspan="2"><span parent="getEdgeAt" class="right-caret" id="method_getEdgeAt"></span> getEdgeAt(<code><i>{x: xPosition
DOM, y: yPosition DOM}</i></code>) DOM, y: yPosition DOM}</i></code>)
</td> </td>
</tr> </tr>
@ -926,7 +912,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','selectNodes', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','selectNodes', this);">
<td colspan="2"><span parent="selectNodes" class="right-caret"></span> selectNodes(<code><i>Array with
<td colspan="2"><span parent="selectNodes" class="right-caret" id="method_selectNodes"></span> selectNodes(<code><i>Array with
nodeIds</i></code>,<code><i>[Boolean nodeIds</i></code>,<code><i>[Boolean
highlightEdges]</i></code>) highlightEdges]</i></code>)
</td> </td>
@ -941,7 +927,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','selectEdges', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','selectEdges', this);">
<td colspan="2"><span parent="selectEdges" class="right-caret"></span> selectEdges(<code><i>Array with
<td colspan="2"><span parent="selectEdges" class="right-caret" id="method_selectEdges"></span> selectEdges(<code><i>Array with
edgeIds</i></code>) edgeIds</i></code>)
</td> </td>
</tr> </tr>
@ -953,7 +939,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','unselectAll', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','unselectAll', this);">
<td colspan="2"><span parent="unselectAll" class="right-caret"></span> unselectAll()</td>
<td colspan="2"><span parent="unselectAll" class="right-caret" id="method_unselectAll"></span> unselectAll()</td>
</tr> </tr>
<tr class="hidden" parent="unselectAll"> <tr class="hidden" parent="unselectAll">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
@ -965,7 +951,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<td colspan="2">Methods to control the viewport for zoom and animation.</td> <td colspan="2">Methods to control the viewport for zoom and animation.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getScale', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getScale', this);">
<td colspan="2"><span parent="getScale" class="right-caret"></span> getScale()</td>
<td colspan="2"><span parent="getScale" class="right-caret" id="method_getScale"></span> getScale()</td>
</tr> </tr>
<tr class="hidden" parent="getScale"> <tr class="hidden" parent="getScale">
<td class="midMethods">Returns: Number</td> <td class="midMethods">Returns: Number</td>
@ -973,7 +959,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);">
<td colspan="2"><span parent="clusterByHubsize" class="right-caret"></span> getViewPosition()</td>
<td colspan="2"><span parent="clusterByHubsize" class="right-caret" id="method_getViewPosition"></span> getViewPosition()</td>
</tr> </tr>
<tr class="hidden" parent="clusterByHubsize"> <tr class="hidden" parent="clusterByHubsize">
<td class="midMethods">Returns: Number</td> <td class="midMethods">Returns: Number</td>
@ -981,7 +967,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','fit', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','fit', this);">
<td colspan="2"><span parent="fit" class="right-caret"></span> fit(<code>[Object
<td colspan="2"><span parent="fit" class="right-caret" id="method_fit"></span> fit(<code>[Object
options]</code>) options]</code>)
</td> </td>
</tr> </tr>
@ -1003,7 +989,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','focus', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','focus', this);">
<td colspan="2"><span parent="focus" class="right-caret"></span> focus(
<td colspan="2"><span parent="focus" class="right-caret" id="method_focus"></span> focus(
<code>String nodeId</code>, <code>String nodeId</code>,
<code>[Object options]</code>) <code>[Object options]</code>)
</td> </td>
@ -1032,7 +1018,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','moveTo', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','moveTo', this);">
<td colspan="2"><span parent="moveTo" class="right-caret"></span> moveTo(<code>Object
<td colspan="2"><span parent="moveTo" class="right-caret" id="method_moveTo"></span> moveTo(<code>Object
options</code>) options</code>)
</td> </td>
</tr> </tr>
@ -1067,7 +1053,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<tr class="collapsible toggle" onclick="toggleTable('methodTable','releaseNode', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','releaseNode', this);">
<td colspan="2"><span parent="releaseNode" class="right-caret"></span> releaseNode()</td>
<td colspan="2"><span parent="releaseNode" class="right-caret" id="method_releaseNode"></span> releaseNode()</td>
</tr> </tr>
<tr class="hidden" parent="releaseNode"> <tr class="hidden" parent="releaseNode">
<td class="midMethods">Returns: none</td> <td class="midMethods">Returns: none</td>
@ -1077,7 +1063,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<td colspan="2">Methods to use with the configurator module.</td> <td colspan="2">Methods to use with the configurator module.</td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getOptionsFromConfigurator', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getOptionsFromConfigurator', this);">
<td colspan="2"><span parent="getOptionsFromConfigurator" class="right-caret"></span> getOptionsFromConfigurator()</td>
<td colspan="2"><span parent="getOptionsFromConfigurator" class="right-caret" id="method_getOptionsFromConfigurator"></span> getOptionsFromConfigurator()</td>
</tr> </tr>
<tr class="hidden" parent="getOptionsFromConfigurator"> <tr class="hidden" parent="getOptionsFromConfigurator">
<td class="midMethods">Returns: Object</td> <td class="midMethods">Returns: Object</td>
@ -1099,8 +1085,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<th>Type</th> <th>Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>joinCondition(<br>&nbsp;&nbsp;<code>nodeOptions:&nbsp;Object</code><br>)</td>
<tr><td>joinCondition(<br>&nbsp;&nbsp;<code>nodeOptions:&nbsp;Object</code><br>)</td>
<td>Function</td> <td>Function</td>
<td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are <td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are
selected to be in the cluster and calls this function with their data as argument. selected to be in the cluster and calls this function with their data as argument.
@ -1128,8 +1113,7 @@ network.clustering.cluster(options);
</pre> </pre>
</td> </td>
</tr> </tr>
<tr>
<td>processProperties(<br>&nbsp;&nbsp;<code>clusterOptions:&nbsp;Object</code>,<br>
<tr><td>processProperties(<br>&nbsp;&nbsp;<code>clusterOptions:&nbsp;Object</code>,<br>
&nbsp;&nbsp;<code>childNodesOptions:&nbsp;Array</code>,<br> &nbsp;&nbsp;<code>childNodesOptions:&nbsp;Array</code>,<br>
&nbsp;&nbsp;<code>childEdgesOptions:&nbsp;Array</code><br>)</td> &nbsp;&nbsp;<code>childEdgesOptions:&nbsp;Array</code><br>)</td>
<td>Function</td> <td>Function</td>
@ -1165,8 +1149,7 @@ var options = {
</pre> </pre>
</td> </td>
</tr> </tr>
<tr>
<td>clusterNodeProperties</td>
<tr><td id="event_clusterNodeProperties">clusterNodeProperties</td>
<td>Object</td> <td>Object</td>
<td><i>Optional. </i> This is an object containing the options for the cluster node. All options <td><i>Optional. </i> This is an object containing the options for the cluster node. All options
described described
@ -1177,8 +1160,7 @@ var options = {
fine tuning. If undefined, default node options will be used. fine tuning. If undefined, default node options will be used.
</td> </td>
</tr> </tr>
<tr>
<td>clusterEdgeProperties</td>
<tr><td id="event_clusterEdgeProperties">clusterEdgeProperties</td>
<td>Object</td> <td>Object</td>
<td><i>Optional. </i> This is an object containing the options for the edges connected to the cluster. <td><i>Optional. </i> This is an object containing the options for the edges connected to the cluster.
All All
@ -1208,8 +1190,7 @@ var options = {
<tr class="subHeader"> <tr class="subHeader">
<td colspan="3">Events triggered by human interaction, selection, dragging etc.</td> <td colspan="3">Events triggered by human interaction, selection, dragging etc.</td>
</tr> </tr>
<tr>
<td>click</td>
<tr><td id="event_click">click</td>
<td> <td>
Object Object
</td> </td>
@ -1227,8 +1208,7 @@ var options = {
</pre> </pre>
</td> </td>
</tr> </tr>
<tr>
<td>doubleClick</td>
<tr><td id="event_doubleClick">doubleClick</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double <td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double
click click
@ -1239,48 +1219,41 @@ var options = {
processing them. processing them.
</td> </td>
</tr> </tr>
<tr>
<td>oncontext</td>
<tr><td id="event_oncontext">oncontext</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not <td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not
select by default. You can use the method <code>getNodeAt</code> to select the node if you select by default. You can use the method <code>getNodeAt</code> to select the node if you
want. want.
</td> </td>
</tr> </tr>
<tr>
<td>hold</td>
<tr><td id="event_hold">hold</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click <td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click
event event
is also fired in this case. is also fired in this case.
</td> </td>
</tr> </tr>
<tr>
<td>release</td>
<tr><td id="event_release">release</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
</td> </td>
</tr> </tr>
<tr>
<td>select</td>
<tr><td id="event_select">select</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when the selection has changed by user action. This means a node or edge has been selected, <td>Fired when the selection has changed by user action. This means a node or edge has been selected,
added added
to the selection or deselected. <b>All select events are only triggered on click and hold</b>. to the selection or deselected. <b>All select events are only triggered on click and hold</b>.
</td> </td>
</tr> </tr>
<tr>
<td>selectNode</td>
<tr><td id="event_selectNode">selectNode</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when a node has been selected by the user.</td> <td>Fired when a node has been selected by the user.</td>
</tr> </tr>
<tr>
<td>selectEdge</td>
<tr><td id="event_selectEdge">selectEdge</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when a edge has been selected by the user.</td> <td>Fired when a edge has been selected by the user.</td>
</tr> </tr>
<tr>
<td>deselectNode</td>
<tr><td id="event_deselectNode">deselectNode</td>
<td>Object <td>Object
</td> </td>
<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: <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:
@ -1301,76 +1274,63 @@ var options = {
</pre> </pre>
</td> </td>
</tr> </tr>
<tr>
<td>deselectEdge</td>
<tr><td id="event_deselectEdge">deselectEdge</td>
<td>same as <code>deselectNode</code>.</td> <td>same as <code>deselectNode</code>.</td>
<td>Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is <td>Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is
the the
list of nodes and edges that were selected before the last user event. list of nodes and edges that were selected before the last user event.
</td> </td>
</tr> </tr>
<tr>
<td>dragStart</td>
<tr><td id="event_dragStart">dragStart</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when starting a drag.</td> <td>Fired when starting a drag.</td>
</tr> </tr>
<tr>
<td>dragging</td>
<tr><td id="event_dragging">dragging</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when dragging node(s) or the view.</td> <td>Fired when dragging node(s) or the view.</td>
</tr> </tr>
<tr>
<td>dragEnd</td>
<tr><td id="event_dragEnd">dragEnd</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when the drag has finished.</td> <td>Fired when the drag has finished.</td>
</tr> </tr>
<tr>
<td>hoverNode</td>
<tr><td id="event_hoverNode">hoverNode</td>
<td><code>{node: nodeId}</code></td> <td><code>{node: nodeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse hovers over a node.</td> <td>Fired interaction:{hover:true} and the mouse hovers over a node.</td>
</tr> </tr>
<tr>
<td>blurNode</td>
<tr><td id="event_blurNode">blurNode</td>
<td><code>{node: nodeId}</code></td> <td><code>{node: nodeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse moved away from a node it was hovering over before.</td> <td>Fired interaction:{hover:true} and the mouse moved away from a node it was hovering over before.</td>
</tr> </tr>
<tr>
<td>hoverEdge</td>
<tr><td id="event_hoverEdge">hoverEdge</td>
<td><code>{edge: edgeId}</code></td> <td><code>{edge: edgeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse hovers over an edge.</td> <td>Fired interaction:{hover:true} and the mouse hovers over an edge.</td>
</tr> </tr>
<tr>
<td>blurEdge</td>
<tr><td id="event_blurEdge">blurEdge</td>
<td><code>{edge: edgeId}</code></td> <td><code>{edge: edgeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse moved away from an edge it was hovering over before.</td> <td>Fired interaction:{hover:true} and the mouse moved away from an edge it was hovering over before.</td>
</tr> </tr>
<tr>
<td>zoom</td>
<tr><td id="event_zoom">zoom</td>
<td><code>{direction:'+'/'-', scale: Number}</code></td> <td><code>{direction:'+'/'-', scale: Number}</code></td>
<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().</td> <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().</td>
</tr> </tr>
<tr>
<td>showPopup</td>
<tr><td id="event_showPopup">showPopup</td>
<td><code>id of item corresponding to popup</code></td> <td><code>id of item corresponding to popup</code></td>
<td>Fired when the popup (tooltip) is shown.</td> <td>Fired when the popup (tooltip) is shown.</td>
</tr> </tr>
<tr>
<td>hidePopup</td>
<tr><td id="event_hidePopup">hidePopup</td>
<td>none</td> <td>none</td>
<td>Fired when the popup (tooltip) is hidden.</td> <td>Fired when the popup (tooltip) is hidden.</td>
</tr> </tr>
<tr class="subHeader "> <tr class="subHeader ">
<td colspan="3">Events triggered the physics simulation. Can be used to trigger GUI updates.</td> <td colspan="3">Events triggered the physics simulation. Can be used to trigger GUI updates.</td>
</tr> </tr>
<tr>
<td>startStabilizing</td>
<tr><td id="event_startStabilizing">startStabilizing</td>
<td>none</td> <td>none</td>
<td>Fired when stabilization starts. This is also the case when you drag a node and the physics <td>Fired when stabilization starts. This is also the case when you drag a node and the physics
simulation simulation
restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'. restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'.
</td> </td>
<tr>
<td>stabilizationProgress</td>
<tr><td id="event_stabilizationProgress">stabilizationProgress</td>
<td>Object</td> <td>Object</td>
<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: <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:
@ -1380,13 +1340,11 @@ var options = {
}</pre> }</pre>
</td> </td>
</tr> </tr>
<tr>
<td>stabilizationIterationsDone</td>
<tr><td id="event_stabilizationIterationsDone">stabilizationIterationsDone</td>
<td>none</td> <td>none</td>
<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. <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.
</td> </td>
<tr>
<td>stabilized</td>
<tr><td id="event_stabilized">stabilized</td>
<td>Object</td> <td>Object</td>
<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: <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:
<pre class="prettyprint lang-js">{ <pre class="prettyprint lang-js">{
@ -1397,8 +1355,7 @@ var options = {
<tr class="subHeader"> <tr class="subHeader">
<td colspan="3">Event triggered by the canvas.</td> <td colspan="3">Event triggered by the canvas.</td>
</tr> </tr>
<tr>
<td>resize</td>
<tr><td id="event_resize">resize</td>
<td>Object</td> <td>Object</td>
<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: <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:
@ -1418,22 +1375,19 @@ var options = {
canvas. canvas.
</td> </td>
</tr> </tr>
<tr>
<td>initRedraw</td>
<tr><td id="event_initRedraw">initRedraw</td>
<td>none</td> <td>none</td>
<td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to <td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to
move move
custom elements before starting drawing the new frame. custom elements before starting drawing the new frame.
</td> </td>
<tr>
<td>beforeDrawing</td>
<tr><td id="event_beforeDrawing">beforeDrawing</td>
<td><code>canvas context</code></td> <td><code>canvas context</code></td>
<td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before <td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before
all all
edges and nodes are drawn. Can be used to draw behind the network. edges and nodes are drawn. Can be used to draw behind the network.
</td> </td>
<tr>
<td>afterDrawing</td>
<tr><td id="event_afterDrawing">afterDrawing</td>
<td><code>canvas context</code></td> <td><code>canvas context</code></td>
<td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
</td> </td>
@ -1441,8 +1395,7 @@ var options = {
<tr class="subHeader"> <tr class="subHeader">
<td colspan="3">Event triggered by the view module.</td> <td colspan="3">Event triggered by the view module.</td>
</tr> </tr>
<tr>
<td>animationFinished</td>
<tr><td id="event_animationFinished">animationFinished</td>
<td>none</td> <td>none</td>
<td>Fired when an animation is finished.</td> <td>Fired when an animation is finished.</td>
</table> </table>
@ -1508,8 +1461,7 @@ var network = new vis.Network(container, data);
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>nodes.fixed</td>
<tr><td>nodes.fixed</td>
<td>Boolean</td> <td>Boolean</td>
<td><code>true</code></td> <td><code>true</code></td>
<td>When false, the nodes will move according to the physics model after import. If true, the nodes do <td>When false, the nodes will move according to the physics model after import. If true, the nodes do
@ -1517,16 +1469,14 @@ var network = new vis.Network(container, data);
errors in the physics. errors in the physics.
</td> </td>
</tr> </tr>
<tr>
<td>nodes.parseColor</td>
<tr><td>nodes.parseColor</td>
<td>Boolean</td> <td>Boolean</td>
<td><code>false</code></td> <td><code>false</code></td>
<td>If true, the color will be parsed by the vis parser, generating extra colors for the borders, <td>If true, the color will be parsed by the vis parser, generating extra colors for the borders,
highlighs and hover. If false, the node will be the supplied color. highlighs and hover. If false, the node will be the supplied color.
</td> </td>
</tr> </tr>
<tr>
<td>edges.inheritColor</td>
<tr><td>edges.inheritColor</td>
<td>Boolean</td> <td>Boolean</td>
<td><code>false</code></td> <td><code>false</code></td>
<td>When true, the color supplied by gephi is ignored and the inherit color mode is used with the global <td>When true, the color supplied by gephi is ignored and the inherit color mode is used with the global

Loading…
Cancel
Save