|
|
|
@ -241,22 +241,22 @@ network.setOptions(options); |
|
|
|
<h3>All Methods</h3> |
|
|
|
|
|
|
|
<p>This is a list of all the methods in the public API. They have been grouped by category, which correspond to the |
|
|
|
modules listed above.</p> |
|
|
|
<table class="moduleTable"> |
|
|
|
modules listed above. They are initially collapsed and colored alternatively.</p> |
|
|
|
<table class="moduleTable" id="moduleTable"> |
|
|
|
<tr class="header"> |
|
|
|
<td class="methodName">name</td> |
|
|
|
<td>returns</td> |
|
|
|
<td>description</td> |
|
|
|
</tr> |
|
|
|
<tr class="subHeader evenRow"> |
|
|
|
<td colspan="3">Global methods for the network.</td> |
|
|
|
<tr class="subHeader evenRow toggle collapsible" onclick="toggleTable('moduleTable','global', this);"> |
|
|
|
<td colspan="3"><span parent="color" class="right-caret"></span> Global methods for the network.</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="global"> |
|
|
|
<td>destroy()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Remove the network from the DOM and remove all Hammer bindings and references.</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="global"> |
|
|
|
<td>setData({<br><code><i>nodes: vis DataSet/Array</i></code>,<br><code><i>edges: vis |
|
|
|
DataSet/Arary</i></code><br>}) |
|
|
|
</td> |
|
|
|
@ -266,7 +266,7 @@ network.setOptions(options); |
|
|
|
network. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="global"> |
|
|
|
<td>setOptions(<code>Object options</code>)</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Set the options. All available options can be found in the modules above. Each module requires it's own |
|
|
|
@ -275,10 +275,10 @@ network.setOptions(options); |
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
|
|
<tr class="subHeader oddRow"> |
|
|
|
<td colspan="3">Methods related to the canvas.</td> |
|
|
|
<tr class="subHeader oddRow toggle collapsible" onclick="toggleTable('moduleTable','canvas', this);"> |
|
|
|
<td colspan="3"><span parent="color" class="right-caret"></span> Methods related to the canvas.</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="canvas"> |
|
|
|
<td>canvasToDOM({<br> <code><i>x: Number</i></code>,<br> <code><i>y: |
|
|
|
Number</i></code><br>}) |
|
|
|
</td> |
|
|
|
@ -287,7 +287,7 @@ network.setOptions(options); |
|
|
|
<code>{x:Number,y:Number}</code>. The DOM values are relative to the network container. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="canvas"> |
|
|
|
<td>DOMtoCanvas({<br> <code><i>x: Number</i></code>,<br> <code><i>y: |
|
|
|
Number</i></code><br>}) |
|
|
|
</td> |
|
|
|
@ -296,8 +296,12 @@ network.setOptions(options); |
|
|
|
<code>{x:Number,y:Number}</code>. The DOM values are relative to the network container. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"><td>redraw()</td><td class="mid">none</td><td>Redraw the network.</td></tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="canvas"> |
|
|
|
<td>redraw()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Redraw the network.</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow hidden" parent="canvas"> |
|
|
|
<td>setSize(<br> <code><i>String width</i></code>,<br> <code><i>String |
|
|
|
height</i></code><br>) |
|
|
|
</td> |
|
|
|
@ -305,10 +309,10 @@ network.setOptions(options); |
|
|
|
<td>Set the size of the canvas. This is automatically done on a window resize.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr class="subHeader evenRow"> |
|
|
|
<td colspan="3">Clustering</td> |
|
|
|
<tr class="subHeader evenRow toggle collapsible" onclick="toggleTable('moduleTable','clustering', this);"> |
|
|
|
<td colspan="3"><span parent="color" class="right-caret"></span> Clustering</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="clustering"> |
|
|
|
<td>cluster(<br> |
|
|
|
<code>Object options</code><br>) |
|
|
|
</td> |
|
|
|
@ -319,7 +323,7 @@ network.setOptions(options); |
|
|
|
is presented with all nodes. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="clustering"> |
|
|
|
<td>clusterByConnection(<br> |
|
|
|
<code>String nodeId</code>,<br> |
|
|
|
<code>[Object options]</code><br> |
|
|
|
@ -332,7 +336,7 @@ network.setOptions(options); |
|
|
|
href="#optionsObject">below</a>. The joinCondition is only presented with the connected nodes. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="clustering"> |
|
|
|
<td>clusterByHubsize(<br> |
|
|
|
<code>Number hubsize</code>,<br> |
|
|
|
<code>[Object options]</code><br>) |
|
|
|
@ -344,14 +348,14 @@ network.setOptions(options); |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="clustering"> |
|
|
|
<td>clusterOutliers(<br> |
|
|
|
<code>[Object options]</code><br>) |
|
|
|
</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>This method will cluster all nodes with 1 edge with their respective connected node.</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="clustering"> |
|
|
|
<td>findNode(<br> |
|
|
|
<code>String nodeId</code><br>) |
|
|
|
</td> |
|
|
|
@ -364,14 +368,14 @@ network.setOptions(options); |
|
|
|
<code>network.clustering.findNode('fred')</code> will return <code>['A','B','C','fred']</code>. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="clustering"> |
|
|
|
<td>isCluster(<br> |
|
|
|
<code>String nodeId</code><br>) |
|
|
|
</td> |
|
|
|
<td class="mid">Boolean</td> |
|
|
|
<td>Returns true if the node whose ID has been supplied is a cluster.</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="clustering"> |
|
|
|
<td>openCluster(<br> |
|
|
|
<code>String nodeId</code><br>) |
|
|
|
</td> |
|
|
|
@ -393,22 +397,24 @@ network.setOptions(options); |
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
|
|
<tr class="subHeader evenRow"> |
|
|
|
<td colspan="3">Manipulation methods to use the manipulation system without GUI.</td> |
|
|
|
<tr class="subHeader evenRow toggle collapsible" onclick="toggleTable('moduleTable','manipulation', this);"> |
|
|
|
<td colspan="3"><span parent="color" class="right-caret"></span> Manipulation methods to use the |
|
|
|
manipulation system without GUI. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="manipulation"> |
|
|
|
<td>enableEditMode()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Programatically enable the edit mode. Similar effect to pressing the edit button.</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="manipulation"> |
|
|
|
<td>disableEditMode()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Programatically disable the edit mode. Similar effect to pressing the close icon (small cross in the |
|
|
|
corner of the toolbar). |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="manipulation"> |
|
|
|
<td>addNodeMode()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Go into addNode mode. Having edit mode or manipulation enabled is not required. To get out of this mode, |
|
|
|
@ -417,32 +423,32 @@ network.setOptions(options); |
|
|
|
<code>enabled</code> to false. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="manipulation"> |
|
|
|
<td>editNodeMode()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Go into editNode mode. The explaination from <code>addNodeMode</code> applies here as well.</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="manipulation"> |
|
|
|
<td>addEdgeMode()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Go into addEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="manipulation"> |
|
|
|
<td>editEdgeMode()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Go into editEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="manipulation"> |
|
|
|
<td>deleteSelected()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Delete selected. Having edit mode or manipulation enabled is not required.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
|
|
<tr class="subHeader oddRow"> |
|
|
|
<td colspan="3">Methods to get information on nodes.</td> |
|
|
|
<tr class="subHeader oddRow toggle collapsible" onclick="toggleTable('moduleTable','nodes', this);"> |
|
|
|
<td colspan="3"><span parent="color" class="right-caret"></span> Methods to get information on nodes.</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="nodes"> |
|
|
|
<td>getPositions(<br> <code><i>[Array of nodeIds]</i></code><br>)</td> |
|
|
|
<td class="mid">Object</td> |
|
|
|
<td>Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object: |
|
|
|
@ -458,7 +464,7 @@ network.setOptions(options); |
|
|
|
are returned. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="nodes"> |
|
|
|
<td>storePositions()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>When using the vis.DataSet to load your nodes into the network, this method will put the X and Y |
|
|
|
@ -480,7 +486,7 @@ network.setOptions(options); |
|
|
|
|
|
|
|
|
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="nodes"> |
|
|
|
<td>getBoundingBox(<br> <code><i>String nodeId</i></code><br>)</td> |
|
|
|
<td class="mid">Object</td> |
|
|
|
<td> Returns a bounding box for the node including label in the format: |
|
|
|
@ -495,46 +501,48 @@ network.setOptions(options); |
|
|
|
These values are in canvas space. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="nodes"> |
|
|
|
<td>getConnectedNodes(<br> <code><i>String nodeId</i></code><br>)</td> |
|
|
|
<td class="mid">Array</td> |
|
|
|
<td>Returns an array of nodeIds of the all the nodes that are directly connected to this node.</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="nodes"> |
|
|
|
<td>getEdges(<br> <code><i>String nodeId</i></code><br>)</td> |
|
|
|
<td class="mid">Array</td> |
|
|
|
<td>Returns an array of edgeIds of the edges connected to this node.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
|
|
<tr class="subHeader evenRow"> |
|
|
|
<td colspan="3">Physics methods to control when the simulation should run.</td> |
|
|
|
<tr class="subHeader evenRow toggle collapsible" onclick="toggleTable('moduleTable','physics', this);"> |
|
|
|
<td colspan="3"><span parent="color" class="right-caret"></span> Physics methods to control when the |
|
|
|
simulation should run. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="physics"> |
|
|
|
<td>startSimulation()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Start the physics simulation. This is normally done whenever needed and is only really useful if you |
|
|
|
stop the simulation yourself and wish to continue it afterwards. |
|
|
|
</td> |
|
|
|
.</td></tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="physics"> |
|
|
|
<td>stopSimulation()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>This stops the physics simulation and triggers a <code>stabilized</code> event. It can be restarted by |
|
|
|
dragging a node, altering the dataset or calling <code>startSimulation()</code>. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="physics"> |
|
|
|
<td>stabilize()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>You can manually call stabilize at any time. All the stabilization options above are used.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
|
|
<tr class="subHeader oddRow"> |
|
|
|
<td colspan="3">Selection methods for nodes and edges.</td> |
|
|
|
<tr class="subHeader oddRow toggle collapsible" onclick="toggleTable('moduleTable','selection', this);"> |
|
|
|
<td colspan="3"><span parent="color" class="right-caret"></span> Selection methods for nodes and edges.</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="selection"> |
|
|
|
<td>getSelection()</td> |
|
|
|
<td class="mid">Object</td> |
|
|
|
<td>Returns an object with selected nodes and edges ids like this: |
|
|
|
@ -546,19 +554,19 @@ network.setOptions(options); |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="selection"> |
|
|
|
<td>getSelectedNodes()</td> |
|
|
|
<td class="mid">Array</td> |
|
|
|
<td>Returns an array of selected node ids like so: |
|
|
|
<code>[nodeId1, nodeId2, ..]</code>. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="selection"> |
|
|
|
<td>getSelectedEdges()</td> |
|
|
|
<td class="mid">Array</td> |
|
|
|
<td>Returns an array of selected edge ids like so: <code>[edgeId1, edgeId2, ..]</code>.</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="selection"> |
|
|
|
<td>getNodeAt(<br> <code><i>{x: xPosition DOM,<br> y: yPosition DOM}</i></code><br>) |
|
|
|
</td> |
|
|
|
<td class="mid">String</td> |
|
|
|
@ -566,7 +574,7 @@ network.setOptions(options); |
|
|
|
of the canvas. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="selection"> |
|
|
|
<td>getEdgeAt(<br> <code><i>{x: xPosition DOM,<br> y: yPosition DOM}</i></code><br>) |
|
|
|
</td> |
|
|
|
<td class="mid">String</code></td> |
|
|
|
@ -574,7 +582,7 @@ network.setOptions(options); |
|
|
|
of the canvas.. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="selection"> |
|
|
|
<td>selectNodes(<br> <code><i>Array with nodeIds</i></code>,<br> <code><i>[Boolean |
|
|
|
highlightEdges]</i></code><br>) |
|
|
|
</td> |
|
|
|
@ -584,35 +592,37 @@ network.setOptions(options); |
|
|
|
its own objects. <i>Does not fire events</i>. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="selection"> |
|
|
|
<td>selectEdges(<br> <code><i>Array with edgeIds</i></code><br>)</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Selects the edges corresponding to the id's in the input array. This method unselects all other objects |
|
|
|
before selecting its own objects. <i>Does not fire events</i>. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<tr class="oddRow hidden" parent="selection"> |
|
|
|
<td>unselectAll()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Unselect all objects. <i>Does not fire events</i>.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
|
|
<tr class="subHeader evenRow"> |
|
|
|
<td colspan="3">Methods to control the viewport for zoom and animation.</td> |
|
|
|
<tr class="subHeader evenRow toggle collapsible" onclick="toggleTable('moduleTable','view', this);"> |
|
|
|
<td colspan="3"><span parent="color" class="right-caret"></span> Methods to control the viewport for zoom |
|
|
|
and animation. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="view"> |
|
|
|
<td>getScale()</td> |
|
|
|
<td class="mid">Number</td> |
|
|
|
<td>Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="view"> |
|
|
|
<td>getPosition()</td> |
|
|
|
<td class="mid">Number</td> |
|
|
|
<td>Returns the current central focus point of the camera.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="view"> |
|
|
|
<td>fit(<code>[Object options]</code>)</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Zooms out so all nodes fit on the canvas. You can supply options to customize this: |
|
|
|
@ -630,7 +640,7 @@ network.setOptions(options); |
|
|
|
All options are optional for the fit method. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="view"> |
|
|
|
<td>focus(<br> |
|
|
|
<code>String nodeId</code>,<br> |
|
|
|
<code>[Object options]</code><br>) |
|
|
|
@ -655,7 +665,7 @@ network.setOptions(options); |
|
|
|
Default value is true. The options object is optional in the focus method. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="view"> |
|
|
|
<td>moveTo(<code>Object options</code>)</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>You can animate or move the camera using the moveTo method. Options are: |
|
|
|
@ -684,7 +694,7 @@ network.setOptions(options); |
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
|
|
<tr class="evenRow"> |
|
|
|
<tr class="evenRow hidden" parent="view"> |
|
|
|
<td>releaseNode()</td> |
|
|
|
<td class="mid">none</td> |
|
|
|
<td>Programatically release the focussed node.</td> |
|
|
|
@ -1013,7 +1023,9 @@ var locales = { |
|
|
|
|
|
|
|
</tr> |
|
|
|
<tr class="subHeader oddRow"> |
|
|
|
<td colspan="3">Events triggered by the rendering module. Can be used to draw custom elements on the canvas.</td> |
|
|
|
<td colspan="3">Events triggered by the rendering module. Can be used to draw custom elements on the |
|
|
|
canvas. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr class="oddRow"> |
|
|
|
<td>initRedraw</td> |
|
|
|
|
Alex de Mulder
9 years ago