<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>
@ -82,7 +77,7 @@
<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>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>
@ -91,7 +86,7 @@
<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>
<p>Alternative to supplying an object, you can supply a <code>String</code>, <code>Array</code> or <code>Boolean</code>. These will do the same as the filter option described below.</p>
<tr><td>filter</td><tdclass="mid">String | Array | Boolean</td><tdclass="mid"><code>true</code></td><td>When a boolean, true gives you all options, false will not show any. If a string is supplied, any combination of the following is allowed: nodes, edges, layout, interaction, manipulation, physics, selection, renderer. Feel free to come up with a fun seperating character. Finally, when supplied an array of strings, any of the previously mentioned fields are accepted.</td></tr>
<tr><td>filter</td><tdclass="mid">String or Array or Boolean</td><tdclass="mid"><code>true</code></td><td>When a boolean, true gives you all options, false will not show any. If a string is supplied, any combination of the following is allowed: nodes, edges, layout, interaction, manipulation, physics, selection, renderer. Feel free to come up with a fun seperating character. Finally, when supplied an array of strings, any of the previously mentioned fields are accepted.</td></tr>
<tr><td>container</td><tdclass="mid">DOM element</td><tdclass="mid"><code>undefined</code></td><td>This allows you to put the configure list in another HTML container than below the network.</td></tr>
<tr><td>arrows</td><tdclass="mid">Object | String</td><tdclass="mid"><code>1</code></td><td>To draw an arrow with default settings a string can be supplied. For example: <code>arrows:'to, from, middle'</code> or <code>'to;from'</code>, any combination with any seperating symbol is fine. If you want to control the size of the arrowheads, you can supply an object.</td></tr>
<tr><td>arrows.to</td><tdclass="mid">Object | Boolean</td><tdclass="mid"><code>Object</code></td><td>When true, an arrowhead on the 'to' side of the edge is drawn, pointing to the 'to' node with default settings. To customize the size of the arrow, supply an object.</td></tr>
<tr><td>arrows.to.enabled</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>Toggle the arrow on or off. This option is optional, if undefined and the scaleFactor property is set, enabled will be set to true.</td></tr>
<tr><td>arrows.to.scaleFactor</td><tdclass="mid">Number</td><tdclass="mid"><code>1</code></td><td>The scale factor allows you to change the size of the arrowhead.</td></tr>
<tr><td>arrows.middle</td><tdclass="mid">Object | Boolean</td><tdclass="mid"><code>Object</code></td><td>Exactly the same as the to object but with an arrowhead in the center of the edge.</td></tr>
<tr><td>arrows.from</td><tdclass="mid">Object | Boolean</td><tdclass="mid"><code>Object</code></td><td>Exactly the same as the to object but with an arrowhead at the from node of the edge.</td></tr>
<tr><td>color</td><tdclass="mid">Object | String</td><tdclass="mid"><code>Object</code></td><td>The color object contains the color information of the edge in every situation. When the edge only needs a single color, a color value like <code>'rgb(120,32,14)'</code>, <code>'#ffffff'</code> or <code>'red'</code> can be supplied instead of an object.</td></tr>
<tr><td>color.color</td><tdclass="mid">String</td><tdclass="mid"><code>'#848484'</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>
<tr><td>color.highlight</td><tdclass="mid">String</td><tdclass="mid"><code>'#848484'</code></td><td>The color the edge when it is selected.</td></tr>
<tr><td>color.hover</td><tdclass="mid">String</td><tdclass="mid"><code>'#848484'</code></td><td>The color the edge when the mouse hovers over it <i>(assuming hover is enabled in the interaction module)</i>.</td></tr>
<tr><td>color.inherit</td><tdclass="mid">String | Boolean</td><tdclass="mid"><code>'from'</code></td><td><i>When color, highlight or hover are defined, inherit is set to false!</i>
<br><br>The default value is 'from' which does the same as true: the edge will inherit the color from the border of the node on the 'from' side.
<br><br>When set to 'to', the border color from the 'to' node will be used.
<br><br>When set to 'both', the color will fade from the from color to the to color. <b>'both' is computationally intensive</b> because the gradient is recomputed every redraw. This is required because the angles change when the nodes move.</td></tr>
<tr><td>color.opacity</td><tdclass="mid">Number</td><tdclass="mid"><code>1.0</code></td><td>It can be useful to set the opacity of an edge without manually changing all the colors. The opacity option will convert all colors (also when using inherit) to adhere to the supplied opacity. The allowed range of the opacity option is between <code>0 and 1</code>. This is only done once so the performance impact is not too big.</td></tr>
<tr><td>dashes</td><tdclass="mid">Object | Boolean</td><tdclass="mid"><code>Object</code></td><td>When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an object. <i>When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth</i>.</td></tr>
<tr><td>dashes.enabled</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>Toggle the dash drawing style on or off. This option is optional, if undefined and the scaleFactor property is set, enabled will be set to true.</td></tr>
<tr><td>dashes.pattern</td><tdclass="mid">Array</td><tdclass="mid"><code>[5,5]</code></td><td>Array of numbers repeating gap length, dash length, gap length, dash length, ... etc. The array is repeated until the distance is filled.</td></tr>
<tr><td>font</td><tdclass="mid">Object | 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>
<tr><td>font.color</td><tdclass="mid">String</td><tdclass="mid"><code>'#343434'</code></td><td>Color of the label text.</td></tr>
<tr><td>font.size</td><tdclass="mid">Number</td><tdclass="mid"><code>14</code></td><td>Size of the label text.</td></tr>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<tr><td>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>font.align</td><tdclass="mid">String</td><tdclass="mid"><code>'horizontal'</code></td><td>Possible options: <code>'horizontal','top','middle','bottom'</code>. The alignment determines how the label is aligned over the edge. The default value <code>horizontal</code> aligns the label horizontally, regardless of the orientation of the edge. When an option other than <code>horizontal</code> is chosen, the label will align itself according to the edge. </td></tr>
<tr><td>hidden</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, the edge is not drawn. It is part still part of the physics simulation however!</td></tr>
<tr><td>hoverWidth</td><tdclass="mid">Number</td><tdclass="mid"><code>1.5</code></td><td>The width of the edge when the mouse hovers over it (and hover is enabled in the interaction module!)</td></tr>
<tr><td>label</td><tdclass="mid">String</td><tdclass="mid"><code>undefined</code></td><td>The label of the edge. HTML does not work in here because the network uses HTML5 Canvas.</td></tr>
<tr><td>length</td><tdclass="mid">Number</td><tdclass="mid"><code>undefined</code></td><td>The physics simulation gives edges a spring length. This value can override the length of the spring in rest.</td></tr>
<tr><td>physics</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When true, the edge is part of the physics simulation. When false, it will not act as a spring.</td></tr>
<tr><td>scaling</td><tdclass="mid">Object</td><tdclass="mid"><code>Object</code></td><td>If the <code>value</code> option is specified, the width of the edges will be scaled according to the properties in this object. Keep in mind that when using scaling, the <code>width</code> option is neglected.</td></tr>
<tr><td>scaling.min</td><tdclass="mid">Number</td><tdclass="mid"><code>1</code></td><td>If edges have a value, their widths are determined by the value, the scaling function and the min max values. The min value is the minimum allowed value.</td></tr>
<tr><td>scaling.max</td><tdclass="mid">Number</td><tdclass="mid"><code>15</code></td><td>This is the maximum allowed width when the edges are scaled using the value option.</td></tr>
<tr><td>scaling.label</td><tdclass="mid">Object | Boolean</td><tdclass="mid"><code>Object</code></td><td>When false, the label is not allowed to scale with the edge. If true it will scale using default settigns. For further customization, you can supply an object.</td></tr>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<tr><td>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 edges when zoomed out and only show the rest when zooming in.</td></tr>
<tr><td>scaling.customScalingFunction</td><tdclass="mid">Function</td><tdclass="mid">in description</td><td>If edges have <code>value</code> fields, this function determines how the size of the nodes are scaled based on their values. The default function is:
<td>If edges 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>
function (min,max,total,value) {
if (max === min) {
@ -127,45 +416,158 @@ function (min,max,total,value) {
}
}
</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>
var scale = customScalingFunction(min,max,total,value);
var diff = maxWidth - minWidth;
myWidth = minWidth + diff * scale;
</pre>
</td></tr>
<tr><td>selfReferenceSize</td><tdclass="mid">Number</td><tdclass="mid"><code>false</code></td><td>When the to and from nodes are the same, a circle is drawn. This is the radius of that circle.</td></tr>
<tr><td>shadow</td><tdclass="mid">Object | Boolean</td><tdclass="mid"><code>Object</code></td><td>When true, the edge casts a shadow using the default settings. This can be further refined by supplying an object.</td></tr>
<tr><td>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>
<tr><td>shadow.size</td><tdclass="mid">Number</td><tdclass="mid"><code>10</code></td><td>The blur size of the shadow.</td></tr>
<tr><td>shadow.x</td><tdclass="mid">Number</td><tdclass="mid"><code>5</code></td><td>The x offset.</td></tr>
<tr><td>shadow.y</td><tdclass="mid">Number</td><tdclass="mid"><code>5</code></td><td>The y offset.</td></tr>
<tr><td>smooth</td><tdclass="mid">Object | Boolean</td><tdclass="mid"><code>Object</code></td><td>When true, the edge is drawn as a quadratic bezier curve. The drawing of these curves takes longer than that of straight curves but it looks better.
There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves have an invisible support node that takes part in the physics simulation. If you have a lot of edges, you may want to consider turning off dynamic smooth curves for performance.</td></tr>
<tr><td>smooth.enabled</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle smooth curves on and off. This is an optional option. If any of the other properties in this object are set, this option will be set to true.</td></tr>
<tr><td>smooth.dynamic</td><tdclass="mid">Boolean</td><tdclass="mid"><code>false</code></td><td>When true, the edges will have an invisible support node guiding the shape. This node is part of the physics simulation. When false, there are a number of different approximations for smooth curves. Those can be selected in the type property.</td></tr>
<tr><td>smooth.type</td><tdclass="mid">String</td><tdclass="mid"><code>'continuous'</code></td><td>Possible options: <code>'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW'</code>. Take a look at our example 26 to see what these look like and pick the one that you like best! <i>These do not do anything for dynamic smooth curves</i>.</td></tr>
<tr><td>smooth.roundness</td><tdclass="mid">Number</td><tdclass="mid"><code>0.5</code></td><td>Accepted range: <code>0 .. 1.0</code>. This parameter tweaks the roundness of the static smooth curves.</td></tr>
<tr><td>title</td><tdclass="mid">String</td><tdclass="mid"><code>undefined</code></td><td>The title is shown in a pop-up when the mouse moves over the edge.</td></tr>
<tr><td>width</td><tdclass="mid">Number</td><tdclass="mid"><code>1</code></td><td>The width of the edge. If value is set, this is not used.</td></tr>
<tr><td>widthSelectionMultiplier</td><tdclass="mid">Number</td><tdclass="mid"><code>2</code></td><td>When you select the edge, the width will be the normal width * widthSelectionMultiplier.</td></tr>
<tr><td>value</td><tdclass="mid">Number</td><tdclass="mid"><code>undefined</code></td><td>When a value is set, the edges' width will be scaled using the options in the scaling object defined above.</td></tr>
</td>
</tr>
<tr>
<td>selectionWidth</td>
<tdclass="mid">Number or Function</td>
<tdclass="mid"><code>1</code></td>
<td>The selectionWidth determines the width of the edge when the edge is selected. If a number is supplied,
this number will be <b>added</b> to the width.
Because the width can be altered by the value and the scaling functions, a constant multiplier or added
value may not give the best results. To solve this, you can supply a function. Example:
<preclass="code">
var options: {
edges: {
selectionWidth: function (width) {return width*2;}
}
}
</pre>
It receives the <code>Number width</code> of the edge. In this simple example multiply the width by 2.
You can taylor the logic in the function as long as it returns a <code>Number</code>.
</td>
</tr>
<tr>
<td>selfReferenceSize</td>
<tdclass="mid">Number</td>
<tdclass="mid"><code>false</code></td>
<td>When the to and from nodes are the same, a circle is drawn. This is the radius of that circle.</td>
<tr><td>useDefaultGroups</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>If your nodes have groups defined that are not in the Groups module, the module loops over the groups it does have, allocating one for each unknown group. When all are used, it goes back to the first group. By setting this to false, the default groups will not be used in this cycle.</td></tr>
You can add multiple groups containing styling information that applies to a certain subset of groups. All options described in the <ahref="./nodes.html">nodes module</a> that make sense can be used here (you're not going to set the same id or x,y position for a group of nodes).
Example:
<trclass="header">
<tdclass="name">name</td>
<tdclass="type">type</td>
<tdclass="default">default</td>
<tdclass="description">description</td>
</tr>
<tr>
<td>useDefaultGroups</td>
<tdclass="mid">Boolean</td>
<tdclass="mid"><code>true</code></td>
<td>If your nodes have groups defined that are not in the Groups module, the module loops over the groups it
does have, allocating one for each unknown group. When all are used, it goes back to the first group. By
setting this to false, the default groups will not be used in this cycle.
</td>
</tr>
<tr>
<td>group*</td>
<tdclass="mid">Object</td>
<tdclass="mid"><code></code></td>
<td>
You can add multiple groups containing styling information that applies to a certain subset of groups.
All options described in the <ahref="./nodes.html">nodes module</a> that make sense can be used here
(you're not going to set the same id or x,y position for a group of nodes).
Example:
<preclass="code">
var nodes = [
{id:1, group:'myGroup', label:"I'm in a custom group called 'myGroup'!"}
@ -90,23 +131,27 @@ var options = {
}
}
</pre>
*) the option is not called group, as shown by the example but can by any custom id, except for 'useDefaultGroups'.
<td></tr>
*) the option is not called group, as shown by the example but can by any custom id, except for
<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>zoomView</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>When true, the user can zoom in.</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">Object</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>
<tr><td>keyboard</td><tdclass="mid">Object | 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>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<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>
</table>
<h3>Methods</h3>
@ -95,7 +94,7 @@
<h3>Events</h3>
<p>These events are fired by the interaction module. They are related to user input.</p>
<tr><td>dragStart</td><tdclass="mid">same as <code>click</code>.</td><td>Fired when starting a drag.</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>
<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>
<tr><td>hierarchical</td><tdclass="mid">Object | 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>
<tr><td>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>
<tr><td>hierarchical.levelSeparation</td><tdclass="mid">Number</td><tdclass="mid"><code>150</code></td><td>The distance between the different levels.</td></tr>
<tr><td>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>
<tr><td>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>
<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>
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>
<ahref="https://github.com/almende/vis"class="hidden-xs hidden-sm hidden-md"><imgstyle="position: absolute; top: 0; right: 0; border: 0;"src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"alt="Fork me on GitHub"data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<divclass="container full">
<h1>Network - manipulation</h1>
<p>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</p>
<h3>Options</h3>
<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>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>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>functionality</td><tdclass="mid">Object</td><tdclass="mid">Object</td><td>You can use this object to switch certain functionalities on or off. By default they are all on.</td></tr>
<tr><td>functionality.addNode</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the adding of nodes.</td></tr>
<tr><td>functionality.addEdge</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the adding of edges.</td></tr>
<tr><td>functionality.editNode</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the editing of nodes. Even if this is enabled, it will only be shown if a handler function is set for <code>editNode</code>.</td></tr>
<tr><td>functionality.editEdge</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the editing of edges.</td></tr>
<tr><td>functionality.deleteNode</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the deletion of nodes.</td></tr>
<tr><td>functionality.deleteEdge</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the deletion of edges.</td></tr>
<tr><td>handlerFunctions</td><tdclass="mid">Object</td><tdclass="mid"><code>Object</code></td><td>These functions are inserted 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.</td></tr>
<tr><td>handlerFunctions.addNode</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when the user clicks the canvas in 'addNode' mode. This function will receive two variables: the properties of the node that can be created and a callback function. If you call the callback function with the properties of the new node, the node will be added. <br><br> Example:
<preclass="code">
var options = {
handlerFunctions: {
addNode: function(nodeData,callback) {
nodeData.label = 'hello world';
callback(nodeData);
}
}
}
</pre>
If you do not want the node created, do not call the callback function or call the callback function <pre>null</pre> or no argument.
</td></tr>
<tr><td>handlerFunctions.addEdge</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>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 = {
handlerFunctions: {
addEdge: function(edgeData,callback) {
if (edgeData.from === edgeData.to) {
var r = confirm("Do you want to connect the node to itself?");
if (r === true) {
callback(edgeData);
}
}
else {
callback(edgeData);
}
}
}
}
</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 <pre>null</pre> or no argument.</td></tr>
<tr><td>handlerFunctions.editNode</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>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>handlerFunctions.editEdge</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>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. To cancel, call the callback function with <pre>null</pre> as argument or without arguments.</pre></td></tr>
<tr><td>handlerFunctions.deleteNode</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when a node is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>handlerFunctions.deleteEdge</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>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:
<preclass="code">
{
shape:'dot',
size:6,
color: {
background: '#ff0000',
border: '#3c3c3c',
highlight: {
background: '#07f968',
border: '#3c3c3c'
}
},
borderWidth: 2,
borderWidthSelected: 2
}
</pre></td></tr>
</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><tdwidth="120px"class="gren"><ahref="./canvas.html">canvas</a></td><td>Handles the HTML part of the network.</td></tr>
<tr><tdclass="gren"><ahref="./configure.html">configure</a></td><td>Generates an interactive option editor with filtering.</td></tr>
<tr><tdclass="gren"><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><tdclass="gren"><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><tdclass="gren"><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><tdclass="gren"><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><tdclass="gren"><ahref="./layout.html">layout</a></td><td>Governs the initial and hierarchical positioning.</td></tr>
<tr><tdclass="gren"><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><tdclass="gren"><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><tdclass="gren"><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><tdclass="gren"><ahref="./selection.html">selection</a></td><td>Handles the selection of nodes and edges.</td></tr>
<tr><tdclass="gren"><ahref="./clustering.html">clustering</a></td><td>Provides the clustering api, giving users full control over the formed clusters.</td></tr>
<tr><tdclass="blue"><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="./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>
<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>
<tr><td>color</td><tdclass="mid">Object | 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>
<tr><td>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>
<tr><td>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>
<tr><td>color.highlight</td><tdclass="mid">Object | 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>
<tr><td>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>
<tr><td>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>
<tr><td>color.hover</td><tdclass="mid">Object/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>
<tr><td>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>
<tr><td>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','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>
<tr><td>fixed</td><tdclass="mid">Object | 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>
<tr><td>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>
<tr><td>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>
<tr><td>font</td><tdclass="mid">Object | 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>
<tr><td>font.color</td><tdclass="mid">String</td><tdclass="mid"><code>'#343434'</code></td><td>Color of the label text.</td></tr>
<tr><td>font.size</td><tdclass="mid">Number</td><tdclass="mid"><code>14</code></td><td>Size of the label text.</td></tr>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<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>
<tr><td>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>
<tr><td>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>
<tr><td>icon.size</td><tdclass="mid">Number</td><tdclass="mid"><code>50</code></td><td>The size of the icon.</td></tr>
<tr><td>icon.color</td><tdclass="mid">String</td><tdclass="mid"><code>'#2B7CE9'</code></td><td>The color of the icon.</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>
<tr><td>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.
<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>
<tr><td>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>
<tr><td>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>
<tr><td>scaling.label</td><tdclass="mid">Object | 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>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<tr><td>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>
<tr><td>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:
<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:
<pre>
function (min,max,total,value) {
if (max === min) {
@ -139,17 +143,17 @@ var diff = maxSize - minSize;
mySize = minSize + diff * scale;
</pre>
</td></tr>
<tr><td>shadow</td><tdclass="mid">Object | 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>
<tr><td>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>
<tr><td>shadow.size</td><tdclass="mid">Number</td><tdclass="mid"><code>10</code></td><td>The blur size of the shadow.</td></tr>
<tr><td>shadow.x</td><tdclass="mid">Number</td><tdclass="mid"><code>5</code></td><td>The x offset.</td></tr>
<tr><td>shadow.y</td><tdclass="mid">Number</td><tdclass="mid"><code>5</code></td><td>The y offset.</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 | 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>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>
<trclass='toggle collapsible'onclick="toggleTable('physicsTable','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>
<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>
<trclass='toggle collapsible'onclick="toggleTable('physicsTable','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>
<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>
<trclass='toggle collapsible'onclick="toggleTable('physicsTable','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>
<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>
@ -101,7 +95,7 @@
<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'</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('physicsTable','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>
<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>
Alex de Mulder
9 years ago