<tr><td>width</td><tdclass="mid">String</td><tdclass="mid"><code>'100%'</code></td><td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td></tr>
<tr><td>height</td><tdclass="mid">String</td><tdclass="mid"><code>'100%'</code></td><td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td></tr>
<trclass="header">
<tdclass="name">name</td>
<tdclass="type">type</td>
<tdclass="default">default</td>
<tdclass="description">description</td>
</tr>
<tr>
<td>width</td>
<tdclass="mid">String</td>
<tdclass="mid"><code>'100%'</code></td>
<td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
</tr>
<tr>
<td>height</td>
<tdclass="mid">String</td>
<tdclass="mid"><code>'100%'</code></td>
<td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
</tr>
</table>
</table>
<h3>Methods</h3>
<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>setSize(String, String)</td><tdclass="mid">none</td><td>Set the size of the canvas. This is automatically done on a window resize.</td></tr>
<tr><td>canvasToDOM(Object)</td><tdclass="mid">Object</td><td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container.</td></tr>
<tr><td>DOMtoCanvas(Object)</td><tdclass="mid">Object</td><td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container.</td></tr>
</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>
</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.
<p>As of 4.0, the network consists of individual modules which handle specific parts of the network. These modules have their own docs, options, methods and events which you can access
by clicking on the modules in the list below.</p>
<p>As of 4.0, the network consists of individual modules which handle specific parts of the network. These modules
have their own docs, options, methods and events which you can access
by clicking on the modules in the list below.</p>
<h3>Modules</h3>
<h3>Modules</h3>
<tableclass="moduleTable">
<tableclass="moduleTable">
<tr><tdwidth="120px"class="gren"><ahref="./canvas.html">canvas</a></td><td>Handles the HTML part of the network.</td></tr>
<tr><td><ahref="./clustering.html">clustering</a></td><td>Provides the clustering api, giving users full control over the formed clusters.</td></tr>
<tr><td><ahref="./configure.html">configure</a></td><td>Generates an interactive option editor with filtering.</td></tr>
<tr><td><ahref="./edges.html">edges</a></td><td>Handles the creation and deletion of edges and contains the global edge options and styles.</td></tr>
<tr><td><ahref="./groups.html">groups</a></td><td>Contains the groups and some options on how to handle nodes with non-existing groups.</td></tr>
<tr><td><ahref="./interaction.html">interaction</a></td><td>Used for all user interaction with the network. Handles mouse and touch events as well as the navigation buttons and the popups.</td></tr>
<tr><td><ahref="./layout.html">layout</a></td><td>Governs the initial and hierarchical positioning.</td></tr>
<tr><td><ahref="./manipulation.html">manipulation</a></td><td>Supplies an API and optional GUI to alter the data in the network.</td></tr>
<tr><td><ahref="./nodes.html">nodes</a></td><td>Handles the creation and deletion of nodes and contains the global node options and styles.</td></tr>
<tr><td><ahref="./physics.html">physics</a></td><td>Does all the simulation moving the nodes and edges to their final positions, also governs stabilization.</td></tr>
<tr><td><ahref="./rendering.html">rendering</a></td><td>Handles the rendering aspect of vis. It governs the render loop, it draws the nodes and edges and provides events to allow users to hook into the drawing.</td></tr>
<tr><td><ahref="./view.html">view</a></td><td>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</td></tr>
<tr><td><ahref="./selection.html">selection</a></td><td>Handles the selection of nodes and edges.</td></tr>
</table>
<h3>All Methods</h3>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
<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>
<p>Handles the creation and deletion of nodes and contains the global node options and styles.</p>
<p>Handles the creation and deletion of nodes and contains the global node options and styles.</p>
<h3>Options</h3>
<h3>Options</h3>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
<tableclass="moduleTable"id="optionTable">
<tableclass="moduleTable"id="optionTable">
<trclass="header">
<trclass="header">
@ -75,56 +99,322 @@
<tdclass="default">default</td>
<tdclass="default">default</td>
<tdclass="description">description</td>
<tdclass="description">description</td>
</tr>
</tr>
<tr><td>borderWidth</td><tdclass="mid">Number</td><tdclass="mid"><code>1</code></td><td>The width of the border of the node.</td></tr>
<tr><td>borderWidthSelected</td><tdclass="mid">Number</td><tdclass="mid"><code>undefined</code></td><td>The width of the border of the node when it is selected. When undefined, the borderWidth is used</td></tr>
<tr><td>brokenImage</td><tdclass="mid">String</td><tdclass="mid"><code>undefined</code></td><td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option can be an URL to a backup image in case the URL supplied in the image option cannot be resolved.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','color', this);"><td><spanparent="color"class="right-caret"></span> color</td><tdclass="mid">Object or String</td><tdclass="mid"><code>Object</code></td><td>The color object contains the color information of the node in every situation. When the node only needs a single color, a color value like <code>'rgba(120,32,14,1)'</code>, <code>'#ffffff'</code> or <code>'red'</code> can be supplied instead of an object.</td></tr>
<trparent="color"class="hidden"><tdclass="indent">color.border</td><tdclass="mid">String</td><tdclass="mid"><code>'#2B7CE9'</code></td><td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is enabled in the interaction module)</i>.</td></tr>
<trparent="color"class="hidden"><tdclass="indent">color.background</td><tdclass="mid">String</td><tdclass="mid"><code>'#D2E5FF'</code></td><td>The color of the background of the node when it is not selected or hovered over <i>(assuming hover is enabled in the interaction module)</i>.</td></tr>
<trparent="color"class="hidden"><tdclass="indent">color.highlight</td><tdclass="mid">Object or String</td><tdclass="mid"><code>Object</code></td><td>The color the node when it is selected. Alternatively you can just supply a string color value.</td></tr>
<trparent="color"class="hidden"><tdclass="indent2">color.highlight.border</td><tdclass="mid">String</td><tdclass="mid"><code>'#2B7CE9'</code></td><td>The color of the border of the node when it is selected.</td></tr>
<trparent="color"class="hidden"><tdclass="indent2">color.highlight.background</td><tdclass="mid">String</td><tdclass="mid"><code>'#D2E5FF'</code></td><td>The color of the background of the node when it is selected.</td></tr>
<trparent="color"class="hidden"><tdclass="indent">color.hover</td><tdclass="mid">Object or String</td><tdclass="mid"><code>Object</code></td><td>The color the node when the mouse hovers over it <i>(assuming hover is enabled in the interaction module)</i>. Shorthand like above is also supported.</td></tr>
<trparent="color"class="hidden"><tdclass="indent2">color.hover.border</td><tdclass="mid">String</td><tdclass="mid"><code>'#2B7CE9'</code></td><td>The color of the border of the node when the mouse hovers over it <i>(assuming hover is enabled in the interaction module)</i>.</td></tr>
<trparent="color"class="hidden"><tdclass="indent2">color.hover.background</td><tdclass="mid">String</td><tdclass="mid"><code>'#D2E5FF'</code></td><td>The color of the background of the node when the mouse hovers over it <i>(assuming hover is enabled in the interaction module)</i>.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','fixed', this);"><td><spanparent="fixed"class="right-caret"></span> fixed</td><tdclass="mid">Object or Boolean</td><tdclass="mid"><code>Object</code></td><td>When true, the node will not move but IS part of the physics simulation. When defined as an object, movement in either X or Y direction can be disabled.</td></tr>
<trparent="fixed"class="hidden"><tdclass="indent">fixed.x</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, the node will not move in the X direction.</td></tr>
<trparent="fixed"class="hidden"><tdclass="indent">fixed.y</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, the node will not move in the Y direction.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','font', this);"><td><spanparent="font"class="right-caret"></span> font</td><tdclass="mid">Object or String</td><tdclass="mid"><code>false</code></td><td>This object defines the details of the label. A shorthand is also supported in the form <code>'size face color'</code> for example: <code>'14px arial red'</code>.</td></tr>
<trparent="font"class="hidden"><tdclass="indent">font.color</td><tdclass="mid">String</td><tdclass="mid"><code>'#343434'</code></td><td>Color of the label text.</td></tr>
<trparent="font"class="hidden"><tdclass="indent">font.size</td><tdclass="mid">Number</td><tdclass="mid"><code>14</code></td><td>Size of the label text.</td></tr>
<trparent="font"class="hidden"><tdclass="indent">font.face</td><tdclass="mid">String</td><tdclass="mid"><code>'arial'</code></td><td>Font face (or font family) of the label text.</td></tr>
<trparent="font"class="hidden"><tdclass="indent">font.background</td><tdclass="mid">String</td><tdclass="mid"><code>undefined</code></td><td>When not <code>undefined</code> but a <b>color string</b>, a background rectangle will be drawn behind the label in the supplied color.</td></tr>
<trparent="font"class="hidden"><tdclass="indent">font.stroke</td><tdclass="mid">Number</td><tdclass="mid"><code>0</code></td><td>As an alternative to the background rectangle, a stroke can be drawn around the text. When a value higher than 0 is supplied, the stroke will be drawn.</td></tr>
<trparent="font"class="hidden"><tdclass="indent">font.strokeColor</td><tdclass="mid">String</td><tdclass="mid"><code>'#ffffff'</code></td><td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td></tr>
<tr><td>group</td><tdclass="mid">String</td><tdclass="mid"><code>undefined</code></td><td>When not <code>undefined</code>, the</td></tr>
<tr><td>hidden</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, the node will not be shown. It will still be part of the physics simulation though!</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','icon', this);"><td><spanparent="icon"class="right-caret"></span> icon</td><tdclass="mid">Object</td><tdclass="mid"><code>Object</code></td><td>These options are only used when the shape is set to <code>icon</code>.</td></tr>
<trparent="icon"class="hidden"><tdclass="indent">icon.face</td><tdclass="mid">String</td><tdclass="mid"><code>'FontAwesome'</code></td><td>These options are only used when the shape is set to <code>icon</code>. The possible options for the face are: <code>'FontAwesome'</code> and <code>'Ionicons'</code>.</td></tr>
<trparent="icon"class="hidden"><tdclass="indent">icon.code</td><tdclass="mid">String</td><tdclass="mid"><code>undefined</code></td><td>This is the code of the icon, for example <code>'\uf007'</code>.</td></tr>
<trparent="icon"class="hidden"><tdclass="indent">icon.size</td><tdclass="mid">Number</td><tdclass="mid"><code>50</code></td><td>The size of the icon.</td></tr>
<trparent="icon"class="hidden"><tdclass="indent">icon.color</td><tdclass="mid">String</td><tdclass="mid"><code>'#2B7CE9'</code></td><td>The color of the icon.</td></tr>
<tr><td>image</td><tdclass="mid">String</td><tdclass="mid"><code>undefined</code></td><td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option should be the URL to an image. If the image cannot be found, the brokenImage option can be used.</td></tr>
<tr><td>label</td><tdclass="mid">String</td><tdclass="mid"><code>undefined</code></td><td>The label is the piece of text shown in or under the node, depending on the shape.</td></tr>
<tr><td>level</td><tdclass="mid">Number</td><tdclass="mid"><code>undefined</code></td><td>When using the hierarchical layout, the level determines where the node is going to be positioned.</td></tr>
<tr><td>mass</td><tdclass="mid">Number</td><tdclass="mid"><code>1</code></td><td>The barnesHut physics model (which is enabled by default) is based on an inverted gravity model. By increasing the mass of a node, you increase it's repulsion. Values lower than 1 are not recommended.</td></tr>
<tr><td>physics</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When false, the node is not part of the physics simulation. It will not move except for from manual dragging.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','scaling', this);"><td><spanparent="scaling"class="right-caret"></span> scaling</td><tdclass="mid">Object</td><tdclass="mid"><code>Object</code></td><td>If the <code>value</code> option is specified, the size of the nodes will be scaled according to the properties in this object. All node shapes can be scaled, but some only when label scaling is enabled as their size is based on the size of the label.
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and <code>icon</code>. Keep in mind that when using scaling, the <code>size</code> option is neglected.</td></tr>
<trparent="scaling"class="hidden"><tdclass="indent">scaling.min</td><tdclass="mid">Number</td><tdclass="mid"><code>10</code></td><td>If nodes have a value, their sizes are determined by the value, the scaling function and the min max values. The min value is the minimum allowed value.</td></tr>
<trparent="scaling"class="hidden"><tdclass="indent">scaling.max</td><tdclass="mid">Number</td><tdclass="mid"><code>30</code></td><td>This is the maximum allowed size when the nodes are scaled using the value option.</td></tr>
<trparent="scaling"class="hidden"><tdclass="indent">scaling.label</td><tdclass="mid">Object or Boolean</td><tdclass="mid"><code>Object</code></td><td>This can be false if the label is not allowed to scale with the node. If true it will scale using default settigns. For further customization, you can supply an object.</td></tr>
<trparent="scaling"class="hidden"><tdclass="indent2">scaling.label.enabled</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>Toggle the scaling of the label on or off. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<trparent="scaling"class="hidden"><tdclass="indent2">scaling.label.min</td><tdclass="mid">Number</td><tdclass="mid"><code>14</code></td><td>The minimum font-size used for labels when scaling.</td></tr>
<trparent="scaling"class="hidden"><tdclass="indent2">scaling.label.max</td><tdclass="mid">Number</td><tdclass="mid"><code>30</code></td><td>The maximum font-size used for labels when scaling.</td></tr>
<trparent="scaling"class="hidden"><tdclass="indent2">scaling.label.maxVisible</td><tdclass="mid">Number</td><tdclass="mid"><code>30</code></td><td>When zooming in, the font is drawn larger as well. You can limit the perceived font size using this option. If set to 30, the font will never look larger than size 30 zoomed at 100%.</td></tr>
<trparent="scaling"class="hidden"><tdclass="indent2">scaling.label.drawThreshold</td><tdclass="mid">Number</td><tdclass="mid"><code>3</code></td><td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn. When using font scaling, you can use this together with the maxVisible to first show labels of important nodes when zoomed out and only show the rest when zooming in.</td></tr>
<trparent="scaling"class="hidden"><tdclass="indent">scaling.customScalingFunction</td><tdclass="mid">Function</td><tdclass="mid">in description</td><td>If nodes have <code>value</code> fields, this function determines how the size of the nodes are scaled based on their values. The default function is:
<tr>
<td>borderWidth</td>
<tdclass="mid">Number</td>
<tdclass="mid"><code>1</code></td>
<td>The width of the border of the node.</td>
</tr>
<tr>
<td>borderWidthSelected</td>
<tdclass="mid">Number</td>
<tdclass="mid"><code>undefined</code></td>
<td>The width of the border of the node when it is selected. When undefined, the borderWidth is used</td>
</tr>
<tr>
<td>brokenImage</td>
<tdclass="mid">String</td>
<tdclass="mid"><code>undefined</code></td>
<td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option can be an URL to
a backup image in case the URL supplied in the image option cannot be resolved.
<td>If nodes have <code>value</code> fields, this function determines how the size of the nodes are scaled
based on their values. The default function is:
<pre>
<pre>
function (min,max,total,value) {
function (min,max,total,value) {
if (max === min) {
if (max === min) {
@ -136,42 +426,192 @@ function (min,max,total,value) {
}
}
}
}
</pre>
</pre>
The function receives the minimum value of the set, the maximum value, the total sum of all values and finally the value of the node or edge it works on. <b>It has to return a value between 0 and 1.</b> The nodes and edges then calculate their size as follows:
The function receives the minimum value of the set, the maximum value, the total sum of all values and
finally the value of the node or edge it works on. <b>It has to return a value between 0 and 1.</b> The
nodes and edges then calculate their size as follows:
<pre>
<pre>
var scale = customScalingFunction(min,max,total,value);
var scale = customScalingFunction(min,max,total,value);
var diff = maxSize - minSize;
var diff = maxSize - minSize;
mySize = minSize + diff * scale;
mySize = minSize + diff * scale;
</pre>
</pre>
</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','shadow', this);"><td><spanparent="shadow"class="right-caret"></span> shadow</td><tdclass="mid">Object or Boolean</td><tdclass="mid"><code>Object</code></td><td>When true, the node casts a shadow using the default settings. This can be further refined by supplying an object.</td></tr>
<trparent="shadow"class="hidden"><tdclass="indent">shadow.enabled</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>Toggle the casting of shadows. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<trparent="shadow"class="hidden"><tdclass="indent">shadow.size</td><tdclass="mid">Number</td><tdclass="mid"><code>10</code></td><td>The blur size of the shadow.</td></tr>
<trparent="shadow"class="hidden"><tdclass="indent">shadow.x</td><tdclass="mid">Number</td><tdclass="mid"><code>5</code></td><td>The x offset.</td></tr>
<trparent="shadow"class="hidden"><tdclass="indent">shadow.y</td><tdclass="mid">Number</td><tdclass="mid"><code>5</code></td><td>The y offset.</td></tr>
<tr><td>shape</td><tdclass="mid">String</td><tdclass="mid"><code>'ellipse'</code></td><td>The shape defines what the node looks like. There are two types of nodes. One type has the label inside of it and the other type has the label underneath it. The types with the label inside of it are:
The ones with the label outside of it are: <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>, <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and <code>icon</code>.</td></tr>
<tr><td>size</td><tdclass="mid">Number</td><tdclass="mid"><code>25</code></td><td>The size is used to determine the size of node shapes that do not have the label inside of them. These shapes are: <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and <code>icon</code></td></tr>
<tr><td>title</td><tdclass="mid">String or Element</td><tdclass="mid"><code>undefined</code></td><td>Title to be displayed when the user hovers over the node. The title can be an HTML element or a string containing plain text or HTML.</td></tr>
<tr><td>value</td><tdclass="mid">Number</td><tdclass="mid"><code>undefined</code></td><td>When a value is set, the nodes will be scaled using the options in the scaling object defined above.</td></tr>
<tr><td>x</td><tdclass="mid">Number</td><tdclass="mid"><code>undefined</code></td><td>This gives a node an initial x position. When using the hierarchical layout, either the x or y position is set by the layout engine depending on the type of view. The other value remains untouched. When using stabilization, the stabilized position may be different from the initial one. To lock the node to that position use the physics or fixed options.</td></tr>
<tr><td>y</td><tdclass="mid">Number</td><tdclass="mid"><code>undefined</code></td><td>This gives a node an initial y position. When using the hierarchical layout, either the x or y position is set by the layout engine depending on the type of view. The other value remains untouched. When using stabilization, the stabilized position may be different from the initial one. To lock the node to that position use the physics or fixed options.</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.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.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.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.zoomExtent</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>
<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>
<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>
<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>getSelectedNodes()</td><tdclass="mid"><code>[nodeId1, nodeId2, ..]</code></td><td>Returns an array of selected node ids.</td></tr>
<tr><td>getSelectedNodes()</td><tdclass="mid"><code>[nodeId1, nodeId2, ..]</code></td><td>Returns an array of selected node ids.</td></tr>
<tr><td>getSelectedEdges()</td><tdclass="mid"><code>[edgeId1, edgeId2, ..]</code></td><td>Returns an array of selected edge ids.</td></tr>
<tr><td>getSelectedEdges()</td><tdclass="mid"><code>[edgeId1, edgeId2, ..]</code></td><td>Returns an array of selected edge ids.</td></tr>
<tr><td>getNodeAt(<br> <code><i>{x: xPosition DOM,<br> y: yPosition DOM}</i></code><br>)</td><tdclass="mid">nodeId</td><td>Returns a nodeId or undefined. The DOM positions are expected to be in pixels from the top left corner of the canvas.</td></tr>
<tr><td>getEdgeAt(<br> <code><i>{x: xPosition DOM,<br> y: yPosition DOM}</i></code><br>)</td><tdclass="mid">edgeId</code></td><td>Returns a edgeId or undefined. The DOM positions are expected to be in pixels from the top left corner of the canvas..</td></tr>
<tr><td>selectNodes(<br> <code><i>Array with nodeIds</i></code>,<br> <code><i>[Boolean highlightEdges]</i></code><br>)</td><tdclass="mid">none</td><td>Selects the nodes corresponding to the id's in the input array. If highlightEdges is true or undefined, the neighbouring edges will also be selected. This method unselects all other objects before selecting its own objects. <i>Does not fire events</i>.</td></tr>
<tr><td>selectNodes(<br> <code><i>Array with nodeIds</i></code>,<br> <code><i>[Boolean highlightEdges]</i></code><br>)</td><tdclass="mid">none</td><td>Selects the nodes corresponding to the id's in the input array. If highlightEdges is true or undefined, the neighbouring edges will also be selected. This method unselects all other objects before selecting its own objects. <i>Does not fire events</i>.</td></tr>
<tr><td>selectEdges(<br> <code><i>Array with edgeIds</i></code><br>)</td><tdclass="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><td>selectEdges(<br> <code><i>Array with edgeIds</i></code><br>)</td><tdclass="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><td>unselectAll()</td><tdclass="mid">none</td><td>Unselect all objects. <i>Does not fire events</i>.</td></tr>
<tr><td>unselectAll()</td><tdclass="mid">none</td><td>Unselect all objects. <i>Does not fire events</i>.</td></tr>
</table>
</table>
<h3>Events</h3>
<h3>Events</h3>
<p>The selection handler does not fire events. All related events are fired by the interaction module because they are triggered by user interaction.</p>
<p>The selection handler does not fire events. All related events are fired by the <ahref="./interaction.html">interaction module</a> because they are triggered by user interaction.</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>
<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>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>
<tr><td>getPosition()</td><tdclass="mid">Number</td><td>Returns the current central focus point of the camera.</td></tr>
<tr><td>fit(<code>[Object options]</code>)</td><tdclass="mid">none</td><td>Zooms out so all nodes fit on the canvas. You can supply options to customize this:
<preclass="code">
{
nodes:[Array of nodeIds],
duration: Number,
easingFunction: String
}
</pre>
The nodes can be used to zoom to fit only specific nodes in the view. <br/><br/>
The other options are explained in the <code>moveTo()</code> description above.
All options are optional for zoomExtent.
</td></tr>
<tr><td>moveTo(<code>Object options</code>)</td><tdclass="mid">none</td><td>You can animate or move the camera using the moveTo method. Options are:
<tr><td>moveTo(<code>Object options</code>)</td><tdclass="mid">none</td><td>You can animate or move the camera using the moveTo method. Options are:
<i>You will have to define at least a scale or a position. Otherwise, there is nothing to move to.</i>
<i>You will have to define at least a scale or a position. Otherwise, there is nothing to move to.</i>
</td></tr>
</td></tr>
<tr><td>zoomExtent(<code>[Object options]</code>)</td><tdclass="mid">none</td><td>Zooms out so all nodes fit on the canvas. You can supply options to customize this:
<preclass="code">
{
nodes:[Array of nodeIds],
duration: Number,
easingFunction: String
}
</pre>
The nodes can be used to zoom to fit only specific nodes in the view. <br/><br/>
The other options are explained in the <code>moveTo()</code> description above.
Alex de Mulder
9 years ago