<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>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>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>zoomView</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When true, the user can zoom in.</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>hoverEnabled</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>
<tr><td>hoverEnabled</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>
<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>tooltipDelay</td><tdclass="mid">Number</td><tdclass="mid"><code>Object</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>
<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>
<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.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.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.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.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>
<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>
</table>
<h3>Methods</h3>
<p>The interaction module has no methods.</p>
<h3>Events</h3>
<p>These events are fired by the interaction module. They are related to user input.</p>
</td><td>Fired when the user clicks the mouse or taps on a touchscreen device.</td></tr>
<tr><td>doubleClick</td><tdclass="mid">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 click is in fact 2 clicks, 2 click events are fired, followed by a double click event. If you do not want to use the click events if a double click event is fired, just check the time between click events before processing them.</td></tr>
<tr><td>oncontext</td><tdclass="mid">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 select by default. You can use <ahref="./selection.html">getNodeAt</a> to select the node if you want.</td></tr>
<tr><td>hold</td><tdclass="mid">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 event is also fired in this case.</td></tr>
<tr><td>release</td><tdclass="mid">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></tr>
<tr><td>select</td><tdclass="mid">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, added to the selection or deselected. <b>All select events are only triggerd on click and hold</b>.</td></tr>
<tr><td>selectNode</td><tdclass="mid">same as <code>click</code>.</td><td>Fired when a node has been selected by the user.</td></tr>
<tr><td>selectEdge</td><tdclass="mid">same as <code>click</code>.</td><td>Fired when a edge has been selected by the user.</td></tr>
</pre></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.</td></tr>
<tr><td>deselectEdge</td><tdclass="mid">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 the list of nodes and edges that were selected before the last user event.</td></tr>
<tr><td>dragStart</td><tdclass="mid">same as <code>click</code>.</td><td>Fired when starting a drag.</td></tr>
<tr><td>dragging</td><tdclass="mid">same as <code>click</code>.</td><td>Fired when dragging node(s) or the view.</td></tr>
<tr><td>dragEnd</td><tdclass="mid">same as <code>click</code>.</td><td>Fired when the drag has finished.</td></tr>
<tr><td>zoom</td><tdclass="mid"><code>{direction:'+'/'-'}</code></td><td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in.</td></tr>
<tr><td>showPopup</td><tdclass="mid"><code>id of item corresponding to popup</code></td><td>Fired when the popup is shown.</td></tr>
<tr><td>hidePopup</td><tdclass="mid">none</td><td>Fired when the popup is hidden.</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>
Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.</td></tr>
Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.</td></tr>
</table>
</table>
<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>getSeed()</td><tdclass="mid">Number</td><td>If you like the layout of your network and would like it to start in the same way next time, ask for the seed using this method and put it in the <code>randomSeed</code> option.</td></tr>
</table>
<h3>Events</h3>
<p>There are no events emitted by the layout module.</p>
<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>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>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>locale</td><tdclass="mid">String</td><tdclass="mid"><code>'en'</code></td><td>Select the locale. By default, the language is English. If you want to use another language, you will need to define your own locale and refer to it here.</td></tr>
<tr><td>locales</td><tdclass="mid">Object</td><tdclass="mid">defaultLocales</td><td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look at the <ahref="#locales"data-scroll=""data-options="{ "easing": "easeInCubic" }">locales section below</a> for more explaination on how to customize this.</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>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
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,
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.
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.
@ -178,43 +174,7 @@ var options = {
</pre></td></tr>
</pre></td></tr>
</table>
</table>
<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>enableEditMode()</td><tdclass="mid">none</td><td>Programatically enable the edit mode. Similar effect to pressing the edit button.</td></tr>
<tr><td>disableEditMode()</td><tdclass="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><td>addNodeMode()</td><tdclass="mid">none</td><td>Go into addNode mode. Having edit mode or manipulation enabled is not required. To get out of this mode, call <code>disableEditMode()</code>. The callback functions defined in <code>handlerFunctions</code> still apply. To use these methods without having the manipulation GUI, make sure you set <code>enabled</code> to false. </td></tr>
<tr><td>editNodeMode()</td><tdclass="mid">none</td><td>Go into editNode mode. The explaination from <code>addNodeMode</code> applies here as well.</td></tr>
<tr><td>addEdgeMode()</td><tdclass="mid">none</td><td>Go into addEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td></tr>
<tr><td>editEdgeMode()</td><tdclass="mid">none</td><td>Go into editEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td></tr>
<tr><td>deleteSelected()</td><tdclass="mid">none</td><td>Delete selected. Having edit mode or manipulation enabled is not required.</td></tr>
</table>
<h3>Events</h3>
<p>There are no events emitted by the layout module.</p>
<h3id="locales">Locales</h3>
<p>The locales object has the following format:</p>
<preclass="code">
var locales = {
en: {
edit: 'Edit',
del: 'Delete selected',
back: 'Back',
addNode: 'Add Node',
addEdge: 'Add Edge',
editNode: 'Edit Node',
editEdge: 'Edit Edge',
addDescription: 'Click in an empty space to place a new node.',
edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
createEdgeError: 'Cannot link edges to a cluster.',
deleteClusterError: 'Clusters cannot be deleted.',
editClusterError: 'Clusters cannot be edited.'
}
}</pre>
<p>If you want to define your own locale, you can change the key ('en' here) and change all the string. You can then use your new key in the locale option.</p>
<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>
<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>
</table>
</table>
<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>startSimulation()</td><tdclass="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><td>stopSimulation()</td><tdclass="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><td>stabilize()</td><tdclass="mid">none</td><td>You can manually call stabilize at any time. All the stabilization options above are used.</td></tr>
</table>
<h3>Events</h3>
<p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
<tr><td>startStabilizing</td><tdclass="mid">none</td><td>Fired when stabilization starts. This is also the case when you drag a node and the physics simulation restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'.</td>
<tr><td>stabilizationProgress</td><tdclass="mid">
<preclass="code">
{
iterations: Number // iterations so far,
total: Number // total iterations in options
}
</pre></td><td>Fired when a multiple of the <code>updateInterval</code> number of iterations is reached. This only occurs in the 'hidden' stabilization.</td></tr>
<tr><td>stabilizationIterationsDone</td><tdclass="mid">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>
<tr><td>stabilized</td><tdclass="mid">
<preclass="code">
{
iterations: Number // iterations it took
}
</pre>
</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.</td>
Alex de Mulder
9 years ago