<p><ahref="http://visjs.org/examples/network/basic_usage.html"target="_blank">The result of the code above will be the basic example which is shown here.</a></p>
<p><ahref="http://visjs.org/examples/network/basicUsage.html"target="_blank">The result of the code above will be the basic example which is shown here.</a></p>
<i>You will have to define at least a scale or a position. Otherwise, there is nothing to move
<i>You will have to define at least a scale, position or offset. Otherwise, there is nothing to move
to.</i>
</td>
</tr>
@ -1147,7 +1153,7 @@ var options = {
</table>
</div>
<divid="eventsDiv"class="hidden">
<divid="eventsDiv"class="hidden">
<h3>All Events</h3>
<p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
@ -1162,11 +1168,14 @@ var options = {
<trclass="subHeader">
<tdcolspan="3">Events triggered by human interaction, selection, dragging etc.</td>
</tr>
<trclass="">
<tr>
<td>click</td>
<td>
<preclass="code">
{
Object
</td>
<td>Fired when the user clicks the mouse or taps on a touchscreen device. Passes an object with properties structured as:
<preclass="prettyprint lang-js">{
nodes: [Array of selected nodeIds],
edges: [Array of selected edgeIds],
event: [Object] original click event,
@ -1177,9 +1186,8 @@ var options = {
}
</pre>
</td>
<td>Fired when the user clicks the mouse or taps on a touchscreen device.</td>
</tr>
<trclass="">
<tr>
<td>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
@ -1191,15 +1199,15 @@ var options = {
processing them.
</td>
</tr>
<trclass="">
<tr>
<td>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 <ahref="./selection.html">getNodeAt</a> to select the node if you
select by default. You can use the method <code>getNodeAt</code> to select the node if you
want.
</td>
</tr>
<trclass="">
<tr>
<td>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
@ -1207,13 +1215,13 @@ var options = {
is also fired in this case.
</td>
</tr>
<trclass="">
<tr>
<td>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>
<trclass="">
<tr>
<td>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,
@ -1221,20 +1229,22 @@ var options = {
to the selection or deselected. <b>All select events are only triggered on click and hold</b>.
</td>
</tr>
<trclass="">
<tr>
<td>selectNode</td>
<td>same as <code>click</code>.</td>
<td>Fired when a node has been selected by the user.</td>
</tr>
<trclass="">
<tr>
<td>selectEdge</td>
<td>same as <code>click</code>.</td>
<td>Fired when a edge has been selected by the user.</td>
</tr>
<trclass="">
<tr>
<td>deselectNode</td>
<td><preclass="code">
{
<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:
<preclass="prettyprint lang-js">{
nodes: [Array of selected nodeIds],
edges: [Array of selected edgeIds],
event: [Object] original click event,
@ -1250,12 +1260,8 @@ var options = {
}
</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>
<trclass="">
<tr>
<td>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
@ -1263,32 +1269,42 @@ var options = {
list of nodes and edges that were selected before the last user event.
</td>
</tr>
<trclass="">
<tr>
<td>dragStart</td>
<td>same as <code>click</code>.</td>
<td>Fired when starting a drag.</td>
</tr>
<trclass="">
<tr>
<td>dragging</td>
<td>same as <code>click</code>.</td>
<td>Fired when dragging node(s) or the view.</td>
</tr>
<trclass="">
<tr>
<td>dragEnd</td>
<td>same as <code>click</code>.</td>
<td>Fired when the drag has finished.</td>
</tr>
<trclass="">
<tr>
<td>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>
<td><code>{node: nodeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse moved away from a node it was hovering over before.</td>
<td>Fired 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>
<trclass="">
<tr>
<td>showPopup</td>
<td><code>id of item corresponding to popup</code></td>
<td>Fired when the popup (tooltip) is shown.</td>
</tr>
<trclass="">
<tr>
<td>hidePopup</td>
<td>none</td>
<td>Fired when the popup (tooltip) is hidden.</td>
@ -1296,55 +1312,47 @@ var options = {
<trclass="subHeader ">
<tdcolspan="3">Events triggered the physics simulation. Can be used to trigger GUI updates.</td>
</tr>
<trclass="">
<tr>
<td>startStabilizing</td>
<td>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>
<trclass="">
<tr>
<td>stabilizationProgress</td>
<td>
<preclass="code">
{
<td>Object</td>
<td>Fired when a multiple of the <code>updateInterval</code> number of iterations is reached. This only occurs in the 'hidden' stabilization. Passes an object with properties structured as:
<preclass="prettyprint lang-js">{
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.
}</pre>
</td>
</tr>
<trclass="">
<tr>
<td>stabilizationIterationsDone</td>
<td>none</td>
<td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is
stabilized; it could also mean that the amount of iterations defined in the options has been
reached.
<td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is stabilized; it could also mean that the amount of iterations defined in the options has been reached.
</td>
<trclass="">
<tr>
<td>stabilized</td>
<td>
<preclass="code">
{
<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">{
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.
}</pre>
</td>
<trclass="subHeader">
<tdcolspan="3">Event triggered by the canvas.</td>
</tr>
<trclass="">
<tr>
<td>resize</td>
<td>
<preclass="code">
<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:
<preclass="prettyprint lang-js">
{
width: Number // the new width of the canvas
height: Number // the new height of the canvas
@ -1352,13 +1360,6 @@ var options = {
oldHeight: Number // the old height of the canvas
}
</pre>
<ul>
</ul>
</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.
</td>
</tr>
@ -1367,21 +1368,21 @@ var options = {
canvas.
</td>
</tr>
<trclass="">
<tr>
<td>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.
</td>
<trclass="">
<tr>
<td>beforeDrawing</td>
<td><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>
<trclass="">
<tr>
<td>afterDrawing</td>
<td><code>canvas context</code></td>
<td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
@ -1390,49 +1391,20 @@ var options = {
<trclass="subHeader">
<tdcolspan="3">Event triggered by the view module.</td>
var parsedData = vis.network.convertDot(DOTstring);
var data = {
nodes: parsedData.nodes,
edges: parsedData.edges
}
<divid="importDiv"class=" hidden">
var options = parsedData.options;
<p>Network contains conversion utilities to import data from <ahref="#importGephi">Gephi</a> and graphs in the <ahref="#importDot">DOT language</a>.</p>
// you can extend the options like a normal JSON variable:
options.nodes = {
color: 'red'
}
<h3id="importGephi">Import data from Gephi</h3>
// create a network
var network = new vis.Network(container, data, options);
</pre>
</div>
<divid="gephiDiv"class=" hidden">
<p>
Network can import data straight from an exported json file from gephi. You can get the JSON exporter here:
@ -1445,7 +1417,7 @@ var network = new vis.Network(container, data, options);
<preclass="prettyprint lang-js">
// load the JSON file containing the Gephi network.
var gephiJSON = loadJSON("./datasources/WorldCup2014.json"); // code in <ahref="../examples/network/data/importing_from_gephi.html">importing_from_gephi</a>.
var gephiJSON = loadJSON("./datasources/WorldCup2014.json"); // code in <ahref="http://visjs.org/examples/network/data/importingFromGephi.html">importing_from_gephi</a>.
// you can customize the result like with these options. These are explained below.
// These are the default options.
@ -1511,8 +1483,45 @@ var network = new vis.Network(container, data);
</tr>
</table>
<h3id="importDot">Import data in DOT language</h3>
<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>
<tr><td>hoverSelectedEdges</td><td>Boolean</td><td><code>true</code></td><td>When true, on hovering over a node, it's connecting edges are highlighted.</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>multiselect</td><td>Boolean</td><td><code>false</code></td><td>When true, a longheld click (or touch) as well as a control-click will add to the selection.</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>
jos
9 years ago
