<code>String nodeId</code><br>)</td><tdclass="mid">none</td><td>Opens the cluster, releases the contained nodes and edges, removing the cluster node and cluster edges.</td></tr>
<tr><td>cluster(<br>
<code>Object options</code><br>)</td><tdclass="mid">none</td><td>The options object is explained in full <ahref="#optionsObject">below</a>. The joinCondition function is presented with all nodes.</td></tr>
<code>Object options</code><br>)</td><tdclass="mid">none</td><td>The options object is explained in full <adata-scroll=""data-options="{ "easing": "easeInCubic" }"href="#optionsObject">below</a>. The joinCondition function is presented with all nodes.</td></tr>
<tr><td>clusterByConnection(<br>
<code>String nodeId</code>,<br>
<code>[Object options]</code><br>
)</td><tdclass="mid">none</td><td>This method looks at the provided node and makes a cluster of it and all it's connected nodes. The behaviour can be customized by proving the options object. All options of this object are explained <ahref="#optionsObject">below</a>. The joinCondition is only presented with the connected nodes.</td></tr>
)</td><tdclass="mid">none</td><td>This method looks at the provided node and makes a cluster of it and all it's connected nodes. The behaviour can be customized by proving the options object. All options of this object are explained <adata-scroll=""data-options="{ "easing": "easeInCubic" }"href="#optionsObject">below</a>. The joinCondition is only presented with the connected nodes.</td></tr>
<tr><td>clusterByHubsize(<br>
<code>Number hubsize</code>,<br>
<code>[Object options]</code><br>)</td><tdclass="mid">none</td><td>This method checks all nodes in the network and those with a equal or higher amount of edges than specified with the <code>hubsize</code> qualify. Cluster by connection is performed on each of them. The options object is described for <code>clusterByConnection</code> and does the same here.</td></tr>
@ -117,7 +119,7 @@
<td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are selected to be in the cluster and calls this function with their data as argument.
If this function returns true, this node will be added to the cluster. You have access to all options (including the default)
as well as any custom fields you may have added to the node to determine whether or not to include it in the cluster. Example:
<tr><td>processProperties(<br> <code>Object nodeOptions</code><br>)</td><tdclass="mid">Function</td><td><i>Optional. </i> Before creating the new cluster node, this (optional) function will be called with the properties supplied by you (<code>clusterNodeProperties</code>), all contained nodes and all contained edges. You can use this to update the
properties of the cluster based on which items it contains. The function should return the properties to create the cluster node. In the example below, we ensure preservation of mass and value when forming the cluster:
<preclass="code">
<preclass="prettyprint lang-js">
var options = {
processProperties: function (clusterOptions, childNodes, childEdges) {
<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>
<p>The options for the canvas have to be contained in an object titled 'canvas'.</p>
<preclass="prettyprint lang-js options">
var options = {
configure:{
filter: 'nodes, physics', // or ['nodes','physics'] or true
container: document.getElementById("configDiv")
}
}
// alternative:
var options = {
configure: 'nodes, physics', // or ['nodes','physics'] or true
}
network.setOptions(options);
</pre>
<p>As shown above, 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 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>
<trclass="header">
<tdclass="nameSmall">name</td>
<tdclass="type">type</td>
<tdclass="default">default</td>
<tdclass="description">description</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>
</td><td>Fired when the user clicks the mouse or taps on a touchscreen device.</td></tr>
<tr><td>doubleClick</td><tdclass="mid">same as <code>click</code>.</td><td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double click is in fact 2 clicks, 2 click events are fired, followed by a double click event. If you do not want to use the click events if a double click event is fired, just check the time between click events before processing them.</td></tr>
<tr><td>rightClick</td><tdclass="mid">same as <code>click</code>.</td><td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not select by default. You can use <ahref="./selection.html">getNodeAt</a> to select the node if you want.</td></tr>
<tr><td>hold</td><tdclass="mid">same as <code>click</code>.</td><td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click event is also fired in this case.</td></tr>
<tr><td>release</td><tdclass="mid">same as <code>click</code>.</td><td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.</td></tr>
<tr><td>select</td><tdclass="mid">same as <code>click</code>.</td><td>Fired when the selection has changed by user action. This means a node or edge has been selected, added to the selection or deselected. <b>All select events are only triggerd on click and hold</b>.</td></tr>
if(finalizedData!==null&&finalizedData!==undefined&&this.inMode==='delete'){// if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
this.body.data.nodes.update(finalizedData);
this.showManipulatorToolbar();
}
});
}
else{
@ -289,6 +310,7 @@ class ManipulationSystem {
// restore the state of any bound functions or events, remove control nodes, restore physics
if(finalizedData!==null&&finalizedData!==undefined&&this.inMode==='delete'){// if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
if(finalizedData!==null&&finalizedData!==undefined&&this.inMode==='addNode'){// if for whatever reason the mode has changes (due to dataset change) disregard the callback
if(finalizedData!==null&&finalizedData!==undefined&&this.inMode==='addEdge'){// if for whatever reason the mode has changes (due to dataset change) disregard the callback
if(finalizedData===null||finalizedData===undefined||this.inMode!=='editEdge'){// if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
Alex de Mulder
9 years ago