Found <spanid="keyword-count"></span> results. Click <aid="keyword-jumper-button"href="">here</a> to jump to the first keyword occurence!
</div>
</div>
</div>
</div>
</nav>
@ -81,7 +96,6 @@
<h1>Network - edges</h1>
<p>Handles the creation and deletion of edges and contains the global edge options and styles.</p>
<aclass="btn btn-primary"role="button"onclick="history.back()">Back to overview.</a>
<h3>Options</h3>
<p>The options for the edges have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined
@ -660,5 +674,11 @@ var options: {
<scriptsrc="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<td><i>Optional. </i> This is an object containing the options for the edges connected to the cluster.
All
options described in the <ahref="./edges.html">edges module</a> are allowed. Using this, you can
style
the edges connecting to the cluster any way you want. If none are provided, the optoins from the
the edges connecting to the cluster any way you want. If none are provided, the options from the
edges
that are replaced are used. If undefined, default edge options will be used.
</td>
@ -1178,8 +1174,9 @@ var options = {
</table>
</div>
<divid="eventsDiv"class="hidden">
<h3>All Events</h3>
<br/><hr/>
<divid="eventsDiv">
<h2id="Events">Events</h2>
<p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
@ -1193,8 +1190,7 @@ var options = {
<trclass="subHeader">
<tdcolspan="3">Events triggered by human interaction, selection, dragging etc.</td>
</tr>
<tr>
<td>click</td>
<tr><tdid="event_click">click</td>
<td>
Object
</td>
@ -1212,8 +1208,7 @@ var options = {
</pre>
</td>
</tr>
<tr>
<td>doubleClick</td>
<tr><tdid="event_doubleClick">doubleClick</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
click
@ -1224,48 +1219,41 @@ var options = {
processing them.
</td>
</tr>
<tr>
<td>oncontext</td>
<tr><tdid="event_oncontext">oncontext</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
select by default. You can use the method <code>getNodeAt</code> to select the node if you
want.
</td>
</tr>
<tr>
<td>hold</td>
<tr><tdid="event_hold">hold</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
event
is also fired in this case.
</td>
</tr>
<tr>
<td>release</td>
<tr><tdid="event_release">release</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>
</tr>
<tr>
<td>select</td>
<tr><tdid="event_select">select</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,
added
to the selection or deselected. <b>All select events are only triggered on click and hold</b>.
</td>
</tr>
<tr>
<td>selectNode</td>
<tr><tdid="event_selectNode">selectNode</td>
<td>same as <code>click</code>.</td>
<td>Fired when a node has been selected by the user.</td>
</tr>
<tr>
<td>selectEdge</td>
<tr><tdid="event_selectEdge">selectEdge</td>
<td>same as <code>click</code>.</td>
<td>Fired when a edge has been selected by the user.</td>
</tr>
<tr>
<td>deselectNode</td>
<tr><tdid="event_deselectNode">deselectNode</td>
<td>Object
</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:
@ -1286,76 +1274,63 @@ var options = {
</pre>
</td>
</tr>
<tr>
<td>deselectEdge</td>
<tr><tdid="event_deselectEdge">deselectEdge</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
the
list of nodes and edges that were selected before the last user event.
</td>
</tr>
<tr>
<td>dragStart</td>
<tr><tdid="event_dragStart">dragStart</td>
<td>same as <code>click</code>.</td>
<td>Fired when starting a drag.</td>
</tr>
<tr>
<td>dragging</td>
<tr><tdid="event_dragging">dragging</td>
<td>same as <code>click</code>.</td>
<td>Fired when dragging node(s) or the view.</td>
</tr>
<tr>
<td>dragEnd</td>
<tr><tdid="event_dragEnd">dragEnd</td>
<td>same as <code>click</code>.</td>
<td>Fired when the drag has finished.</td>
</tr>
<tr>
<td>hoverNode</td>
<tr><tdid="event_hoverNode">hoverNode</td>
<td><code>{node: nodeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse hovers over a node.</td>
</tr>
<tr>
<td>blurNode</td>
<tr><tdid="event_blurNode">blurNode</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>
</tr>
<tr>
<td>hoverEdge</td>
<tr><tdid="event_hoverEdge">hoverEdge</td>
<td><code>{edge: edgeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse hovers over an edge.</td>
</tr>
<tr>
<td>blurEdge</td>
<tr><tdid="event_blurEdge">blurEdge</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 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>
<td>showPopup</td>
<tr><tdid="event_showPopup">showPopup</td>
<td><code>id of item corresponding to popup</code></td>
<td>Fired when the popup (tooltip) is shown.</td>
</tr>
<tr>
<td>hidePopup</td>
<tr><tdid="event_hidePopup">hidePopup</td>
<td>none</td>
<td>Fired when the popup (tooltip) is hidden.</td>
</tr>
<trclass="subHeader ">
<tdcolspan="3">Events triggered the physics simulation. Can be used to trigger GUI updates.</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 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>
<tr><tdid="event_stabilized">stabilized</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:
<preclass="prettyprint lang-js">{
@ -1382,8 +1355,7 @@ var options = {
<trclass="subHeader">
<tdcolspan="3">Event triggered by the canvas.</td>
</tr>
<tr>
<td>resize</td>
<tr><tdid="event_resize">resize</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:
@ -1403,22 +1375,19 @@ var options = {
canvas.
</td>
</tr>
<tr>
<td>initRedraw</td>
<tr><tdid="event_initRedraw">initRedraw</td>
<td>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.
<tdcolspan="3">Event triggered by the configuration module.</td>
</tr>
<tr><tdid="event_configChange">configChange</td>
<td>Object</td>
<td>Fired when a user changes any option in the configurator. The options object can be used with the setOptions method or stringified using JSON.stringify().
You do not have to manually put the options into the network: this is done automatically. You can use the event
to store user options in the database.
</td>
</tr>
</table>
</div>
<divid="importDiv"class=" hidden">
<br/><hr/>
<divid="importDiv">
<h2id="importing_data">Importing data</h2>
<p>Network contains conversion utilities to import data from <ahref="#importGephi">Gephi</a> and graphs in the <ahref="#importDot">DOT language</a>.</p>
@ -1491,8 +1472,7 @@ var network = new vis.Network(container, data);
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>nodes.fixed</td>
<tr><td>nodes.fixed</td>
<td>Boolean</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
@ -1500,16 +1480,14 @@ var network = new vis.Network(container, data);
errors in the physics.
</td>
</tr>
<tr>
<td>nodes.parseColor</td>
<tr><td>nodes.parseColor</td>
<td>Boolean</td>
<td><code>false</code></td>
<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.
</td>
</tr>
<tr>
<td>edges.inheritColor</td>
<tr><td>edges.inheritColor</td>
<td>Boolean</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
@ -1566,5 +1544,11 @@ var network = new vis.Network(container, data, options);
<scriptsrc="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
Found <spanid="keyword-count"></span> results. Click <aid="keyword-jumper-button"href="">here</a> to jump to the first keyword occurence!
</div>
</div>
</div>
</div>
</nav>
@ -73,7 +90,6 @@
<h1>Network - nodes</h1>
<p>Handles the creation and deletion of nodes and contains the global node options and styles.</p>
<aclass="btn btn-primary"role="button"onclick="history.back()">Back to overview.</a>
<h3>Options</h3>
<p>The options for the nodes have to be contained in an object titled 'nodes'. All of these options can be supplied per node as well. Obviously, 'id' should not be defined globally but per node. Options defined
in the global nodes object, are applied to all nodes. If a node has options of its own, those will be used instead of the global options.</p>
<td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as argument, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <ahref="#Templates">Templates</a> for a detailed explanation.</td>
</tr>
<tr>
<td>height</td>
<td>number or String</td>
@ -900,6 +916,16 @@ function (option, path) {
</td>
</tr>
<tr>
<td>zoomKey</td>
<td>String</td>
<td><code>''</code></td>
<td>Specifies whether the Timeline is only zoomed when an additional key is down.
Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'.
Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
</td>
</tr>
<tr>
<td>zoomMax</td>
<td>number</td>
@ -1607,5 +1633,11 @@ var options = {
<scriptsrc="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
Alex de Mulder
9 years ago