<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@ -118,24 +118,24 @@ network.setOptions(options);
<p>As shown above, alternative to supplying an object, you can supply a <code>String</code>, <code>Array</code>, <code>Function</code> or
<code>Boolean</code>. These will do the same as the filter option described below.</p>
<tableclass="moduleTable">
<tableclass="options">
<tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>enabled</td>
<tdclass="mid">Boolean</td>
<tdclass="mid"><code>true</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Toggle the configuration interface on or off. This is an optional parameter. If left undefined and any of the other properties of this object are defined, this will be set to true.
<tr><td>dragNodes</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When true, the nodes that are not fixed can be dragged by the user.</td></tr>
<tr><td>dragView</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When true, the view can be dragged around by the user.</td></tr>
<tr><td>hideEdgesOnDrag</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hideNodesOnDrag</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hover</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','keyboard', this);"><td><spanparent="keyboard"class="right-caret"></span> keyboard</td><tdclass="mid">Object or Boolean</td><tdclass="mid"><code>Object</code></td><td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.enabled</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.speed.x</td><tdclass="mid">Number</td><tdclass="mid"><code>1</code></td><td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.speed.y</td><tdclass="mid">Number</td><tdclass="mid"><code>1</code></td><td>The speed at which the view moves in the y direction on pressing a key or pressing a navigation button.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.speed.zoom</td><tdclass="mid">Number</td><tdclass="mid"><code>0.02</code></td><td>The speed at which the view zooms in or out pressing a key or pressing a navigation button.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.bindToWindow</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When binding the keyboard shortcuts to the window, they will work regardless of which DOM object has the focus. If you have multiple networks on your page, you could set this to false, making sure the keyboard shortcuts only work on the network that has the focus.</td></tr>
<tr><td>navigationButtons</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, navigation buttons are drawn on the network canvas. These are HTML buttons and can be completely customized using CSS.</td></tr>
<tr><td>selectable</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr>
<tr><td>selectConnectedEdges</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr>
<tr><td>tooltipDelay</td><tdclass="mid">Number</td><tdclass="mid"><code>300</code></td><td>When nodes or edges have a defined <code>'title'</code> field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown.</td></tr>
<tr><td>zoomView</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When true, the user can zoom in.</td></tr>
<tr><td>dragNodes</td><td>Boolean</td><td><code>true</code></td><td>When true, the nodes that are not fixed can be dragged by the user.</td></tr>
<tr><td>dragView</td><td>Boolean</td><td><code>true</code></td><td>When true, the view can be dragged around by the user.</td></tr>
<tr><td>hideEdgesOnDrag</td><td>Boolean</td><td><code>false</code></td><td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hideNodesOnDrag</td><td>Boolean</td><td><code>false</code></td><td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hover</td><td>Boolean</td><td><code>false</code></td><td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','keyboard', this);"><td><spanparent="keyboard"class="right-caret"></span> keyboard</td><td>Object or Boolean</td><td><code>Object</code></td><td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.enabled</td><td>Boolean</td><td><code>false</code></td><td>Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.speed.x</td><td>Number</td><td><code>1</code></td><td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.speed.y</td><td>Number</td><td><code>1</code></td><td>The speed at which the view moves in the y direction on pressing a key or pressing a navigation button.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.speed.zoom</td><td>Number</td><td><code>0.02</code></td><td>The speed at which the view zooms in or out pressing a key or pressing a navigation button.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.bindToWindow</td><td>Boolean</td><td><code>true</code></td><td>When binding the keyboard shortcuts to the window, they will work regardless of which DOM object has the focus. If you have multiple networks on your page, you could set this to false, making sure the keyboard shortcuts only work on the network that has the focus.</td></tr>
<tr><td>navigationButtons</td><td>Boolean</td><td><code>false</code></td><td>When true, navigation buttons are drawn on the network canvas. These are HTML buttons and can be completely customized using CSS.</td></tr>
<tr><td>selectable</td><td>Boolean</td><td><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr>
<tr><td>selectConnectedEdges</td><td>Boolean</td><td><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr>
<tr><td>tooltipDelay</td><td>Number</td><td><code>300</code></td><td>When nodes or edges have a defined <code>'title'</code> field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown.</td></tr>
<tr><td>zoomView</td><td>Boolean</td><td><code>true</code></td><td>When true, the user can zoom in.</td></tr>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
@ -109,14 +109,14 @@ var options = {
network.setOptions(options);
</pre>
<p>When enabling the hierarchical layout, it overrules some of the other options. The physics is set to the hierarchical repulsion solver and dynamic smooth edges are converted to static smooth edges.</p>
<tr><td>randomSeed</td><tdclass="mid">Number</td><tdclass="mid"><code>undefined</code></td><td>When NOT using the hierarchical layout, the nodes are randomly positioned initially. This means that the settled result is different every time. If you provide a random seed manually, the layout will be the same every time. Ideally you try with an undefined seed, reload until you are happy with the layout and use the <code>getSeed()</code> method to ascertain the seed.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','hierarchical', this);"><td><spanparent="repulsion"class="right-caret"></span> hierarchical</td><tdclass="mid">Object or Boolean</td><tdclass="mid"><code>Object</code></td><td>When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.</td></tr>
<trparent="hierarchical"class="hidden"><tdclass="indent">hierarchical.enabled</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<trparent="hierarchical"class="hidden"><tdclass="indent">hierarchical.levelSeparation</td><tdclass="mid">Number</td><tdclass="mid"><code>150</code></td><td>The distance between the different levels.</td></tr>
<trparent="hierarchical"class="hidden"><tdclass="indent">hierarchical.direction</td><tdclass="mid">String</td><tdclass="mid"><code>'UD'</code></td><td>The direction of the hierarchical layout. The available options are: <code>UD, DU, LR, RL</code>. To simplify: up-down, down-up, left-right, right-left.</td></tr>
<trparent="hierarchical"class="hidden"><tdclass="indent">hierarchical.sortMethod</td><tdclass="mid">String</td><tdclass="mid"><code>'hubsize'</code></td><td>The algorithm used to ascertain the levels of the nodes based on the data. The possible options are: <code>hubsize, directed</code>. <br><br>
<tr><td>randomSeed</td><td>Number</td><td><code>undefined</code></td><td>When NOT using the hierarchical layout, the nodes are randomly positioned initially. This means that the settled result is different every time. If you provide a random seed manually, the layout will be the same every time. Ideally you try with an undefined seed, reload until you are happy with the layout and use the <code>getSeed()</code> method to ascertain the seed.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','hierarchical', this);"><td><spanparent="repulsion"class="right-caret"></span> hierarchical</td><td>Object or Boolean</td><td><code>Object</code></td><td>When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.</td></tr>
<trparent="hierarchical"class="hidden"><tdclass="indent">hierarchical.enabled</td><td>Boolean</td><td><code>false</code></td><td>Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<trparent="hierarchical"class="hidden"><tdclass="indent">hierarchical.levelSeparation</td><td>Number</td><td><code>150</code></td><td>The distance between the different levels.</td></tr>
<trparent="hierarchical"class="hidden"><tdclass="indent">hierarchical.direction</td><td>String</td><td><code>'UD'</code></td><td>The direction of the hierarchical layout. The available options are: <code>UD, DU, LR, RL</code>. To simplify: up-down, down-up, left-right, right-left.</td></tr>
<trparent="hierarchical"class="hidden"><tdclass="indent">hierarchical.sortMethod</td><td>String</td><td><code>'hubsize'</code></td><td>The algorithm used to ascertain the levels of the nodes based on the data. The possible options are: <code>hubsize, directed</code>. <br><br>
Hubsize takes the nodes with the most edges and puts them at the top. From that the rest of the hierarchy is evaluated. <br><br>
Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.</td></tr>
<tr><td>enabled</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>Toggle the manipulation system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr>
<tr><td>initiallyActive</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr>
<tr><td>addNode</td><tdclass="mid">Boolean or Function</td><tdclass="mid"><code>true</code></td><td>You can use these options to switch certain functionalities on or off of attach
<tr><td>enabled</td><td>Boolean</td><td><code>false</code></td><td>Toggle the manipulation system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr>
<tr><td>initiallyActive</td><td>Boolean</td><td><code>true</code></td><td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr>
<tr><td>addNode</td><td>Boolean or Function</td><td><code>true</code></td><td>You can use these options to switch certain functionalities on or off of attach
a handler function to them. These functions are called before the action is performed. If a node is going to be added through the manipulation system,
the addNode function will be called first. With this, you can provide a gui for your users, abort the process or anything else you want to do. For all except the editNode functionality, these handler functions are optional.
<br><br>
@ -131,7 +131,7 @@ var options = {
}
</pre>
This function changes the label of the new node into 'hello world'. If you do not want the node created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr>
<tr><td>addEdge</td><tdclass="mid">Boolean or Function</td><tdclass="mid"><code>true</code></td><td>If boolean, toggle the adding of edges.
<tr><td>addEdge</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the adding of edges.
When a function is supplied, it will be called when the user drags the new edge from one node to the next in 'addEdge' mode. This function will receive two variables: the properties of the edge that can be created and a callback function. If you call the callback function with the properties of the new edge, the edge will be added. <br><br> Example:
<preclass="code">
var options = {
@ -151,11 +151,11 @@ var options = {
}
</pre>
This example code will show a popup if you connect a node to itself to ask you if that was what you wanted. If you do not want the edge created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr></td></tr>
<tr><td>editNode</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Editing of nodes is only possible when a handling function is supplied. If this is not the case, editing of nodes will be disabled. The function will be called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the <code>addNode</code> function with the node's data and a callback function.</td></tr>
<tr><td>editEdge</td><tdclass="mid">Boolean or Function</td><tdclass="mid"><code>true</code></td><td>If boolean, toggle the editing of edges. When a function is supplied, it will be called when an edge is selcted and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. <b>To cancel, call the callback function with <code>null</code> as argument or without arguments</b>.</td></tr>
<tr><td>deleteNode</td><tdclass="mid">Boolean or Function</td><tdclass="mid"><code>true</code></td><td>If boolean, toggle the deletion of nodes. If function, it will be called when a node is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>deleteEdge</td><tdclass="mid">Boolean or Function</td><tdclass="mid"><code>true</code></td><td>If boolean, toggle the deletion of edges. If function, it will be called when an edge is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>controlNodeStyle</td><tdclass="mid">Object</td><tdclass="mid">Object</td><td>You can supply any styling information you'd like here. All fields described in <ahref="./nodes.html">the nodes module</a> are allowed except obviously for id, x, y and fixed. <br><br>Default:
<tr><td>editNode</td><td>Function</td><td><code>undefined</code></td><td>Editing of nodes is only possible when a handling function is supplied. If this is not the case, editing of nodes will be disabled. The function will be called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the <code>addNode</code> function with the node's data and a callback function.</td></tr>
<tr><td>editEdge</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the editing of edges. When a function is supplied, it will be called when an edge is selcted and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. <b>To cancel, call the callback function with <code>null</code> as argument or without arguments</b>.</td></tr>
<tr><td>deleteNode</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the deletion of nodes. If function, it will be called when a node is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>deleteEdge</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the deletion of edges. If function, it will be called when an edge is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>controlNodeStyle</td><td>Object</td><td>Object</td><td>You can supply any styling information you'd like here. All fields described in <ahref="./nodes.html">the nodes module</a> are allowed except obviously for id, x, y and fixed. <br><br>Default:
<trclass='toggle collapsible'onclick="toggleTable('optionTable','barnesHut', this);"><td><spanparent="barnesHut"class="right-caret"></span> barnesHut</td><tdclass="mid">Object</td><tdclass="mid"><code>Object</code></td><td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.gravitationalConstant</td><tdclass="mid">Number</td><tdclass="mid"><code>-2000</code></td><td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.centralGravity</td><tdclass="mid">Number</td><tdclass="mid"><code>0.3</code></td><td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.springLength</td><tdclass="mid">Number</td><tdclass="mid"><code>95</code></td><td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.springConstant</td><tdclass="mid">Number</td><tdclass="mid"><code>0.04</code></td><td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.damping</td><tdclass="mid">Number</td><tdclass="mid"><code>0.09</code></td><td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.avoidOverlap</td><tdclass="mid">Number</td><tdclass="mid"><code>0</code></td><td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model and the spring model. Value 1 is maximum overlap avoidance.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','forceAtlas2Based', this);"><td><spanparent="forceAtlas2Based"class="right-caret"></span> forceAtlas2Based</td><tdclass="mid">Object</td><tdclass="mid"><code>Object</code></td><td>Force Atlas 2 has been developed by <ahref="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679"target="_blank">Jacomi <i>et al</i> (2014)</a> for use with Gephi. The forceAtlas2Based solver makes use of some of the equations provided
<trclass='toggle collapsible'onclick="toggleTable('optionTable','barnesHut', this);"><td><spanparent="barnesHut"class="right-caret"></span> barnesHut</td><td>Object</td><td><code>Object</code></td><td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.gravitationalConstant</td><td>Number</td><td><code>-2000</code></td><td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.centralGravity</td><td>Number</td><td><code>0.3</code></td><td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.springLength</td><td>Number</td><td><code>95</code></td><td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.springConstant</td><td>Number</td><td><code>0.04</code></td><td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.damping</td><td>Number</td><td><code>0.09</code></td><td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.avoidOverlap</td><td>Number</td><td><code>0</code></td><td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','forceAtlas2Based', this);"><td><spanparent="forceAtlas2Based"class="right-caret"></span> forceAtlas2Based</td><td>Object</td><td><code>Object</code></td><td>Force Atlas 2 has been developed by <ahref="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679"target="_blank">Jacomi <i>et al</i> (2014)</a> for use with Gephi. The forceAtlas2Based solver makes use of some of the equations provided
by them and makes use of the barnesHut implementation in vis. The main differences are the central gravity model,
which is here distance independent, and the repulsion being linear instead of quadratic. Finally, all node masses have a
multiplier based on the amount of connected edges plus one.</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.gravitationalConstant</td><tdclass="mid">Number</td><tdclass="mid"><code>-50</code></td><td>This is similar to the barnesHut method except that the falloff is linear instead of quadratic. The connectivity is also taken into account as a factor of the mass. If you want the repulsion to be stronger, decrease the value (so -1000, -2000).</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.centralGravity</td><tdclass="mid">Number</td><tdclass="mid"><code>0.01</code></td><td>There is a central gravity attractor to pull the entire network back to the center. This is not dependent on distance.</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.springLength</td><tdclass="mid">Number</td><tdclass="mid"><code>100</code></td><td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.springConstant</td><tdclass="mid">Number</td><tdclass="mid"><code>0.08</code></td><td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.damping</td><tdclass="mid">Number</td><tdclass="mid"><code>0.4</code></td><td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.avoidOverlap</td><tdclass="mid">Number</td><tdclass="mid"><code>0</code></td><td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model and the spring model. Value 1 is maximum overlap avoidance.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','repulsion', this);"><td><spanparent="repulsion"class="right-caret"></span> repulsion</td><tdclass="mid">Object</td><tdclass="mid"><code>Object</code></td><td>The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.nodeDistance</td><tdclass="mid">Number</td><tdclass="mid"><code>100</code></td><td>This is the range of influence for the repulsion.</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.centralGravity</td><tdclass="mid">Number</td><tdclass="mid"><code>0.2</code></td><td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.springLength</td><tdclass="mid">Number</td><tdclass="mid"><code>200</code></td><td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.springConstant</td><tdclass="mid">Number</td><tdclass="mid"><code>0.05</code></td><td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.damping</td><tdclass="mid">Number</td><tdclass="mid"><code>0.09</code></td><td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.avoidOverlap</td><tdclass="mid">Number</td><tdclass="mid"><code>0</code></td><td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for the spring model. Value 1 is maximum overlap avoidance.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','hierarchicalRepulsion', this);"><td><spanparent="hierarchicalRepulsion"class="right-caret"></span> hierarchicalRepulsion</td><tdclass="mid">Object</td><tdclass="mid"><code>Object</code></td><td>This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.</td></tr>
<trparent="hierarchicalRepulsion"class="hidden"><tdclass="indent">hierarchicalRepulsion.nodeDistance</td><tdclass="mid">Number</td><tdclass="mid"><code>120</code></td><td>This is the range of influence for the repulsion.</td></tr>
<trparent="hierarchicalRepulsion"class="hidden"><tdclass="indent">hierarchicalRepulsion.centralGravity</td><tdclass="mid">Number</td><tdclass="mid"><code>0.0'</code></td><td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<trparent="hierarchicalRepulsion"class="hidden"><tdclass="indent">hierarchicalRepulsion.springLength</td><tdclass="mid">Number</td><tdclass="mid"><code>100</code></td><td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<trparent="hierarchicalRepulsion"class="hidden"><tdclass="indent">hierarchicalRepulsion.springConstant</td><tdclass="mid">Number</td><tdclass="mid"><code>0.01</code></td><td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<trparent="hierarchicalRepulsion"class="hidden"><tdclass="indent">hierarchicalRepulsion.damping</td><tdclass="mid">Number</td><tdclass="mid"><code>0.09</code></td><td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr><td>maxVelocity</td><tdclass="mid">Number</td><tdclass="mid"><code>50</code></td><td>The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.</td></tr>
<tr><td>minVelocity</td><tdclass="mid">Number</td><tdclass="mid"><code>0.1</code></td><td>Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.</td></tr>
<tr><td>solver</td><tdclass="mid">String</td><tdclass="mid"><code>'barnesHut'</code></td><td>You can select your own solver. Possible options: <code>'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'</code>. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','stabilization', this);"><td><spanparent="stabilization"class="right-caret"></span> stabilization</td><tdclass="mid">Object | Boolean</td><tdclass="mid"><code>Object</code></td><td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
<trparent="stabilization"class="hidden"><tdclass="indent">stabilization.enabled</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
<trparent="stabilization"class="hidden"><tdclass="indent">stabilization.iterations</td><tdclass="mid">Number</td><tdclass="mid"><code>1000</code></td><td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
<trparent="stabilization"class="hidden"><tdclass="indent">stabilization.updateInterval</td><tdclass="mid">Number</td><tdclass="mid"><code>100</code></td><td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
<trparent="stabilization"class="hidden"><tdclass="indent">stabilization.onlyDynamicEdges</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
<trparent="stabilization"class="hidden"><tdclass="indent">stabilization.fit</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
<tr><td>timestep</td><tdclass="mid">Number</td><tdclass="mid"><code>0.5</code></td><td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.gravitationalConstant</td><td>Number</td><td><code>-50</code></td><td>This is similar to the barnesHut method except that the falloff is linear instead of quadratic. The connectivity is also taken into account as a factor of the mass. If you want the repulsion to be stronger, decrease the value (so -1000, -2000).</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.centralGravity</td><td>Number</td><td><code>0.01</code></td><td>There is a central gravity attractor to pull the entire network back to the center. This is not dependent on distance.</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.springLength</td><td>Number</td><td><code>100</code></td><td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.springConstant</td><td>Number</td><td><code>0.08</code></td><td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.damping</td><td>Number</td><td><code>0.4</code></td><td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<trparent="forceAtlas2Based"class="hidden"><tdclass="indent">forceAtlas2Based.avoidOverlap</td><td>Number</td><td><code>0</code></td><td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','repulsion', this);"><td><spanparent="repulsion"class="right-caret"></span> repulsion</td><td>Object</td><td><code>Object</code></td><td>The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.nodeDistance</td><td>Number</td><td><code>100</code></td><td>This is the range of influence for the repulsion.</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.centralGravity</td><td>Number</td><td><code>0.2</code></td><td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.springLength</td><td>Number</td><td><code>200</code></td><td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.springConstant</td><td>Number</td><td><code>0.05</code></td><td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<trparent="repulsion"class="hidden"><tdclass="indent">repulsion.damping</td><td>Number</td><td><code>0.09</code></td><td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','hierarchicalRepulsion', this);"><td><spanparent="hierarchicalRepulsion"class="right-caret"></span> hierarchicalRepulsion</td><td>Object</td><td><code>Object</code></td><td>This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.</td></tr>
<trparent="hierarchicalRepulsion"class="hidden"><tdclass="indent">hierarchicalRepulsion.nodeDistance</td><td>Number</td><td><code>120</code></td><td>This is the range of influence for the repulsion.</td></tr>
<trparent="hierarchicalRepulsion"class="hidden"><tdclass="indent">hierarchicalRepulsion.centralGravity</td><td>Number</td><td><code>0.0'</code></td><td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<trparent="hierarchicalRepulsion"class="hidden"><tdclass="indent">hierarchicalRepulsion.springLength</td><td>Number</td><td><code>100</code></td><td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<trparent="hierarchicalRepulsion"class="hidden"><tdclass="indent">hierarchicalRepulsion.springConstant</td><td>Number</td><td><code>0.01</code></td><td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<trparent="hierarchicalRepulsion"class="hidden"><tdclass="indent">hierarchicalRepulsion.damping</td><td>Number</td><td><code>0.09</code></td><td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr><td>maxVelocity</td><td>Number</td><td><code>50</code></td><td>The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.</td></tr>
<tr><td>minVelocity</td><td>Number</td><td><code>0.1</code></td><td>Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.</td></tr>
<tr><td>solver</td><td>String</td><td><code>'barnesHut'</code></td><td>You can select your own solver. Possible options: <code>'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'</code>. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','stabilization', this);"><td><spanparent="stabilization"class="right-caret"></span> stabilization</td><td>Object | Boolean</td><td><code>Object</code></td><td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
<trparent="stabilization"class="hidden"><tdclass="indent">stabilization.enabled</td><td>Boolean</td><td><code>true</code></td><td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
<trparent="stabilization"class="hidden"><tdclass="indent">stabilization.iterations</td><td>Number</td><td><code>1000</code></td><td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
<trparent="stabilization"class="hidden"><tdclass="indent">stabilization.updateInterval</td><td>Number</td><td><code>100</code></td><td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
<trparent="stabilization"class="hidden"><tdclass="indent">stabilization.onlyDynamicEdges</td><td>Boolean</td><td><code>false</code></td><td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
<trparent="stabilization"class="hidden"><tdclass="indent">stabilization.fit</td><td>Boolean</td><td><code>true</code></td><td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
<tr><td>timestep</td><td>Number</td><td><code>0.5</code></td><td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
<code>String nodeId</code><br>)</td><tdclass="mid">Array</td><td>Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds showing where the node is. Example: <br>
@ -113,7 +113,7 @@
<br>
<h4id="optionsObject">Cluster options object</h4>
<p>The options object supplied to the cluster functions can contain these properties:</p>
<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.
<tr><td>hideEdgesOnDrag</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hideNodesOnDrag</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
@ -98,14 +98,14 @@ network.setOptions(options);
<h3>Methods</h3>
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
<tr><td>initRedraw</td><tdclass="mid">none</td><td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to move custom elements before starting drawing the new frame.</td>
<tr><td>beforeDrawing</td><tdclass="mid"><code>canvas context</code></td><td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before all edges and nodes are drawn. Can be used to draw behind the network.</td>
<tr><td>selectable</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr>
<tr><td>selectConnectedEdges</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr>
@ -99,7 +99,7 @@ network.setOptions(options);
<h3>Methods</h3>
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
<tr><td>getScale()</td><tdclass="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><td>getPosition()</td><tdclass="mid">Number</td><td>Returns the current central focus point of the camera.</td></tr>
@ -140,7 +140,7 @@
<h3>Events</h3>
<p>These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.</p>
jos
9 years ago