visjs-network

<?js var self = this; ?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>vis.js - Network documentation.</title>  <link href="../css/bootstrap.css" rel="stylesheet">  <link href="../css/tipuesearch.css" rel="stylesheet"> <link href="../css/style.css" rel="stylesheet">   <link href="../css/prettify.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="../js/googleAnalytics.js"></script> <script type="text/javascript" src="../js/prettify/prettify.js"></script> <script src="../js/smooth-scroll.min.js"></script> <script language="JavaScript"> smoothScroll.init(); </script> <style> tr.subHeader { font-weight: bold; font-style: italic; } tr.subHeader td { padding-top: 30px; } td.midMethods { width: 150px; background-color: #ffffff; border: 1px solid #dddddd; } tr.visible td { padding: 10px; } </style> <script> function toggleGettingStarted(aThis) { var gettingStartedDiv = document.getElementById('gettingStarted'); if (aThis.innerHTML.indexOf("Show") !== -1) { gettingStartedDiv.className = ''; aThis.innerHTML = 'Hide the getting started again.'; } else { gettingStartedDiv.className = 'hidden'; aThis.innerHTML = 'Show the getting started!'; } } </script> <script type="text/javascript" src="../js/toggleTable.js"></script> </head> <body onload="prettyPrint();"> <?js= self.partial('tmpl/navbar.tmpl') ?> <div class="container full"> <h1>Network</h1> <p>Network is a visualization to display networks and networks consisting of nodes and edges. The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more. The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.</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> <a class="btn btn-primary" role="button" onclick="toggleGettingStarted(this)">Show the getting started!</a> <div id="gettingStarted" class="hidden"> <h3>Creating a Network</h3> <p> Creating a vis network is easy. <a href="http://visjs.org/#download_install" target="_blank">It requires you to include the vis.js and css files which you can get here</a>. If you have these added to your application, you will need to specify your nodes and edges. You can use DOT language or export nodes and edges from Gephi if you'd like but we will do it without these for now. For more information on this click the tabs below. You can also use the vis.DataSets for dynamic data binding, for instance, changing the color, label or any option after you have initialized the network. <br><br> Once you have the data, all you need is a container div to tell vis where to put your network. Additionally you can use an options object to customize many aspects of the network. In code this looks like this:</p> <pre class="prettyprint lang-html options"> <html> <head> <script type="text/javascript" src="../../dist/vis.js"></script> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { width: 600px; height: 400px; border: 1px solid lightgray; } </style> </head> <body> <div id="mynetwork"></div> <script type="text/javascript"> // create an array with nodes var nodes = new vis.DataSet([ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id: 3, label: 'Node 3'}, {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'} ]); // create an array with edges var edges = new vis.DataSet([ {from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5} ]); // create a network var container = document.getElementById('mynetwork'); // provide the data in the vis format var data = { nodes: nodes, edges: edges }; var options = {}; // initialize your network! var network = new vis.Network(container, data, options); </script> </body> </html> </pre> <p><a href="http://visjs.org/examples/network/basicUsage.html" target="_blank">The result of the code above will be the basic example which is shown here.</a></p> <br> </div> <h2 id="Contents">Contents</h2> <ul> <li><a href="#modules">Modules</a></li> <li><a href="#options">Options</a></li> <li><a href="#methods">Method Reference</a> <ul> <li><a href="#methodGlobal">Global</a></li> <li><a href="#methodCanvas">Canvas</a></li> <li><a href="#methodClustering">Clustering</a></li> <li><a href="#methodLayout">Layout</a></li> <li><a href="#methodManipulation">Manipulation</a></li> <li><a href="#methodInformation">Information</a></li> <li><a href="#methodPhysics">Physics</a></li> <li><a href="#methodSelection">Selection</a></li> <li><a href="#methodViewport">Viewport</a></li> <li><a href="#methodConfigurator">Configurator</a></li> </ul> </li> <li><a href="#Events">Events</a></li> <li><a href="#importing_data">Importing Data</a> <ul> <li><a href="#importGephi">from Gephi</a></li> <li><a href="#importDot">from DOT language</a></li> </ul> </li> </ul> <h2 id="modules">Modules</h2> <table class="modules"> <tr> <td width="120px"><a href="./configure.html">configure</a></td> <td>Generates an interactive option editor with filtering.</td> </tr> <tr> <td><a href="./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><a href="./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><a href="./interaction.html">interaction</a></td> <td>Used for all user interaction with the network. Handles mouse and touch events and selection as well as the navigation buttons and the popups. </td> </tr> <tr> <td><a href="./layout.html">layout</a></td> <td>Governs the initial and hierarchical positioning.</td> </tr> <tr> <td><a href="./manipulation.html">manipulation</a></td> <td>Supplies an API and optional GUI to alter the data in the network.</td> </tr> <tr> <td><a href="./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><a href="./physics.html">physics</a></td> <td>Does all the simulation moving the nodes and edges to their final positions, also governs stabilization. </td> </tr> </table> <br> <div id="optionsDiv"> <h2 id="options">Options</h2> <pre class="prettyprint lang-js options"> var options = { autoResize: true, height: '100%', width: '100%' locale: 'en', locales: locales, clickToUse: false, configure: {...}, // defined in the configure module. edges: {...}, // defined in the edges module. nodes: {...}, // defined in the nodes module. groups: {...}, // defined in the groups module. layout: {...}, // defined in the layout module. interaction: {...}, // defined in the interaction module. manipulation: {...}, // defined in the manipulation module. physics: {...}, // defined in the physics module. } network.setOptions(options); </pre> <p>The individual options are explained below. The ones referring to modules are explained in the corresponding module.</p> <table class="options"> <tr> <th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> <tr><td id="event_autoResize">autoResize</td> <td>Boolean</td> <td><code>true</code></td> <td>If true, the Network will automatically detect when its container is resized, and redraw itself accordingly. If false, the Network can be forced to repaint after its container has been resized using the function redraw() and setSize(). </td> </tr> <tr><td id="event_width">width</td> <td>String</td> <td><code>'100%'</code></td> <td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td> </tr> <tr><td id="event_height">height</td> <td>String</td> <td><code>'100%'</code></td> <td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td> </tr> <tr><td id="event_locale">locale</td> <td>String</td> <td><code>'en'</code></td> <td>Select the locale. By default, the language is English. </td> </tr> <tr><td id="event_locales">locales</td> <td>Object</td> <td>defaultLocales</td> <td>Locales object. By default <code>'en'</code>, <code>'de'</code>, <code>'es'</code>, <code>'it'</code>, <code>'nl'</code> <code>'pt-br'</code>, <code>'ru'</code> are supported. Take a look at the <a href="#locales" data-scroll="" data-options="{ "easing": "easeInCubic" }">locales section below</a> for more explaination on how to customize this. </td> </tr> <tr><td id="event_clickToUse">clickToUse</td> <td>Boolean</td> <td>false</td> <td>When a Network is configured to be <code>clickToUse</code>, it will react to mouse and touch events only when active. When active, a blue shadow border is displayed around the Network. The network is set active by clicking on it, and is changed to inactive again by clicking outside the Network or by pressing the ESC key. </td> </tr> <tr><td id="event_configure">configure</td> <td>Object</td> <td>Object</td> <td>All options in this object are explained in the <a href="./configure.html">configure module</a>. </td> </tr> <tr><td id="event_edges">edges</td> <td>Object</td> <td>Object</td> <td>All options in this object are explained in the <a href="./edges.html">edges module</a>. </td> </tr> <tr><td id="event_nodes">nodes</td> <td>Object</td> <td>Object</td> <td>All options in this object are explained in the <a href="./nodes.html">nodes module</a>. </td> </tr> <tr><td id="event_groups">groups</td> <td>Object</td> <td>Object</td> <td>All options in this object are explained in the <a href="./groups.html">groups module</a>. </td> </tr> <tr><td id="event_layout">layout</td> <td>Object</td> <td>Object</td> <td>All options in this object are explained in the <a href="./layout.html">layout module</a>. </td> </tr> <tr><td id="event_interaction">interaction</td> <td>Object</td> <td>Object</td> <td>All options in this object are explained in the <a href="./interaction.html">interaction module</a>. </td> </tr> <tr><td id="event_manipulation">manipulation</td> <td>Object</td> <td>Object</td> <td>All options in this object are explained in the <a href="./manipulation.html">manipulation module</a>. </td> </tr> <tr><td id="event_physics">physics</td> <td>Object</td> <td>Object</td> <td>All options in this object are explained in the <a href="./physics.html">physics module</a>. </td> </tr> </table> <br> <br> <h4 id="locales">Custom locales</h4> <p>The locales object has the following format:</p> <pre class="prettyprint lang-js"> 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 strings. You can then use your new key in the locale option.</p> </div> <br /><hr /> <div id="methodsDiv"> <h2 id="methods">Methods</h2> <p>This is a list of all the methods in the public API. They have been grouped by category, which correspond to the modules listed above.</p> <table class="methods-collapsable" id="methodTable"> <tr id="methodGlobal" class="subHeader"> <td colspan="2">Global methods for the network.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','destroy', this);"> <td colspan="2"><span parent="destroy" class="right-caret" id="method_destroy"></span> destroy()</td> </tr> <tr class="hidden" parent="destroy"> <td class="midMethods">Returns: none</td> <td>Remove the network from the DOM and remove all Hammer bindings and references.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','setData', this);"> <td colspan="2"><span parent="setData" class="right-caret" id="method_setData"></span> setData({<code><i>nodes: vis DataSet/Array</i></code>,<code><i>edges: vis DataSet/Array</i></code>}) </td> </tr> <tr class="hidden" parent="setData"> <td class="midMethods">Returns: none</td> <td>Override all the data in the network. If stabilization is enabled in the <a href="physics.html">physics module</a>, the network will stabilize again. This method is also performed when first initializing the network. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','setOptions', this);"> <td colspan="2"><span parent="setOptions" class="right-caret" id="method_setOptions"></span> setOptions(<code>Object options</code>) </td> </tr> <tr class="hidden" parent="setOptions"> <td class="midMethods">Returns: none</td> <td>Set the options. All available options can be found in the modules above. Each module requires it's own container with the module name to contain its options. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','onEvent', this);"> <td colspan="2"><span parent="onEvent" class="right-caret" id="method_on"></span> on(<code>String event name, Function callback</code>) </td> </tr> <tr class="hidden" parent="onEvent"> <td class="midMethods">Returns: none</td> <td>Set an event listener. Depending on the type of event you get different parameters for the callback function. Look at the event section of the documentation for more information. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','offEvent', this);"> <td colspan="2"><span parent="offEvent" class="right-caret" id="method_off"></span> off(<code>String event name, Function callback</code>) </td> </tr> <tr class="hidden" parent="offEvent"> <td class="midMethods">Returns: none</td> <td>Remove an event listener. The function you supply has to be the exact same as the one you used in the on function. If no function is supplied, all listeners will be removed. Look at the event section of the documentation for more information. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','onceEvent', this);"> <td colspan="2"><span parent="onceEvent" class="right-caret" id="method_once"></span> once(<code>String event name, Function callback</code>) </td> </tr> <tr class="hidden" parent="onceEvent"> <td class="midMethods">Returns: none</td> <td>Set an event listener only once. After it has taken place, the event listener will be removed. Depending on the type of event you get different parameters for the callback function. Look at the event section of the documentation for more information. </td> </tr> <tr id="methodCanvas" class="subHeader"> <td colspan="2">Methods related to the canvas.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','canvasToDOM', this);"> <td colspan="2"><span parent="canvasToDOM" class="right-caret" id="method_canvasToDOM"></span> canvasToDOM({<code><i>x: Number</i></code>,<code><i>y: Number</i></code>}) </td> </tr> <tr class="hidden" parent="canvasToDOM"> <td class="midMethods">Returns: 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 class="collapsible toggle" onclick="toggleTable('methodTable','DOMtoCanvas', this);"> <td colspan="2"><span parent="DOMtoCanvas" class="right-caret" id="method_DOMtoCanvas"></span> DOMtoCanvas({<code><i>x: Number</i></code>,<code><i>y: Number</i></code>}) </td> </tr> <tr class="hidden" parent="DOMtoCanvas"> <td class="midMethods">Returns: 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> <tr class="collapsible toggle" onclick="toggleTable('methodTable','redraw', this);"> <td colspan="2"><span parent="redraw" class="right-caret" id="method_redraw"></span> redraw()</td> </tr> <tr class="hidden" parent="redraw"> <td class="midMethods">Returns: none</td> <td>Redraw the network.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','setSize', this);"> <td colspan="2"><span parent="setSize" class="right-caret" id="method_setSize"></span> setSize(<code><i>String width</i></code>,<code><i>String height</i></code>) </td> </tr> <tr class="hidden" parent="setSize"> <td class="midMethods">Returns: none</td> <td>Set the size of the canvas. This is automatically done on a window resize.</td> </tr> <tr id="methodClustering" class="subHeader"> <td colspan="2">Clustering</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','cluster', this);"> <td colspan="2"><span parent="cluster" class="right-caret" id="method_cluster"></span> cluster( <code>Object options</code>) </td> </tr> <tr class="hidden" parent="cluster"> <td class="midMethods">Returns: none</td> <td>The options object is explained in full <a data-scroll="" data-options="{ "easing": "easeInCubic" }" href="#optionsObject">below</a>. The joinCondition function is presented with all nodes. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByConnection', this);"> <td colspan="2"><span parent="clusterByConnection" class="right-caret" id="method_clusterByConnection"></span> clusterByConnection( <code>String nodeId</code>, <code>[Object options]</code> ) </td> </tr> <tr class="hidden" parent="clusterByConnection"> <td class="midMethods">Returns: 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 <a data-scroll="" data-options="{ "easing": "easeInCubic" }" href="#optionsObject">below</a>. The joinCondition is only presented with the connected nodes. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);"> <td colspan="2"><span parent="clusterByHubsize" class="right-caret" id="method_clusterByHubsize"></span> clusterByHubsize( <code>[Number hubsize]</code>, <code>[Object options]</code>) </td> </tr> <tr class="hidden" parent="clusterByHubsize"> <td class="midMethods">Returns: 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. If a hubsize is not defined, the hubsize will be determined as the average value plus two standard deviations. <br><br> For all qualifying nodes, clusterByConnection is performed on each of them. The options object is described for <code>clusterByConnection</code> and does the same here. </td> </tr> <?js= self.partial('tmpl/renderMethod.tmpl', "Network#clusterOutliers") ?> <?js= self.partial('tmpl/renderMethod.tmpl', "Network#findNode") ?> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getClusteredEdges', this);"> <td colspan="2"><span parent="getClusteredEdges" class="right-caret" id="method_getClusteredEdges"></span> getClusteredEdges( <code>String baseEdgeId</code>) </tr> <tr class="hidden" parent="getClusteredEdges"> <td class="midMethods">Returns: Array</td> <td>Similiar to <code>findNode</code> in that it returns all the edge ids that were created from the provided edge during clustering </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBaseEdge', this);"> <td colspan="2"><span parent="getBaseEdge" class="right-caret" id="method_getBaseEdge"></span> getBaseEdge( <code>String clusteredEdgeId</code>) </tr> <tr class="hidden" parent="getBaseEdge"> <td class="midMethods">Returns: Value</td> <td>When a clusteredEdgeId is available, this method will return the original baseEdgeId provided in <code>data.edges</code><br/> ie. After clustering the 'SelectEdge' event is fired but provides only the clustered edge. This method can then be used to return the baseEdgeId.<br><br> <b>This method is deprecated. Please use <code>getBaseEdges()</code> instead.</b> </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBaseEdges', this);"> <td colspan="2"><span parent="getBaseEdges" class="right-caret" id="method_getBaseEdges"></span> getBaseEdges(<code>String clusteredEdgeId</code>) </td> </tr> <tr class="hidden" parent="getBaseEdges"> <td class="midMethods">Returns: Array</td> <td>For the given <code>clusteredEdgeId</code>, this method will return all the original base edge id's provided in <code>data.edges</code>. For a non-clustered (i.e. 'base') edge, <code>clusteredEdgeId</code> is returned.<br/><br/> Only the base edge id's are returned. All clustered edges id's under <code>clusteredEdgeId</code> are skipped, but scanned recursively to return their base id's.<br/> </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','updateEdge', this);"> <td colspan="2"><span parent="updateEdge" class="right-caret" id="method_updateEdge"></span> updateEdge( <code>String startEdgeId, Object options</code>) </tr> <tr class="hidden" parent="updateEdge"> <td class="midMethods">Returns: none</td> <td>Visible edges between clustered nodes are not the same edge as the ones provided in <code>data.edges</code> passed on <code>network</code> creation<br/> With each layer of clustering, copies of the edges between clusters are created and the previous edges are hidden, until the cluster is opened.<br/> This method takes an edgeId (ie. a base edgeId from <data>data.edges</code>) and applys the options to it and any edges that were created from it while clustering.<br><br> Example: <code>network.clustering.updateEdge(originalEdge.id, {color : '#aa0000'});</code><br/> This would turn the base edge and any subsequent edges red, so when opening clusters the edges will all be the same color. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','updateClusteredNode', this);"> <td colspan="2"><span parent="updateClusteredNode" class="right-caret" id="method_updateClusteredNode"></span> updateClusteredNode( <code>String clusteredNodeId, Object options</code>) </tr> <tr class="hidden" parent="updateClusteredNode"> <td class="midMethods">Returns: none</td> <td>Clustered Nodes when created are not contained in the original <code>data.nodes</code> passed on <code>network</code> creation<br/> This method updates the cluster node.<br><br> Example: <code>network.clustering.updateClusteredNode(clusteredNodeId, {shape : 'star'});</code> </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','isCluster', this);"> <td colspan="2"><span parent="isCluster" class="right-caret" id="method_isCluster"></span> isCluster( <code>String nodeId</code>) </tr> <tr class="hidden" parent="isCluster"> <td class="midMethods">Returns: Boolean</td> <td>Returns true if the node whose ID has been supplied is a cluster.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodesInCluster', this);"> <td colspan="2"><span parent="getNodesInCluster" class="right-caret" id="method_getNodesInCluster"></span> getNodesInCluster( <code>String clusterNodeId</code>) </tr> <tr class="hidden" parent="getNodesInCluster"> <td class="midMethods">Returns: Array</td> <td>Returns an array of all nodeIds of the nodes that would be released if you open the cluster. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','openCluster', this);"> <td colspan="2"><span parent="openCluster" class="right-caret" id="method_openCluster"></span> openCluster( <code>String nodeId, Object options</code>) </tr> <tr class="hidden" parent="openCluster"> <td class="midMethods">Returns: none</td> <td>Opens the cluster, releases the contained nodes and edges, removing the cluster node and cluster edges. The options object is optional and currently supports one option, releaseFunction, which is a function that can be used to manually position the nodes after the cluster is opened. <br> <pre class="code"> function releaseFunction (clusterPosition, containedNodesPositions) { var newPositions = {}; // clusterPosition = {x:clusterX, y:clusterY}; // containedNodesPositions = {nodeId:{x:nodeX,y:nodeY}, nodeId2....} newPositions[nodeId] = {x:newPosX, y:newPosY}; return newPositions; }</pre> The containedNodesPositions contain the positions of the nodes in the cluster at the moment they were clustered. This function is expected to return the newPositions, which can be the containedNodesPositions (altered) or a new object. This has to be an object with keys equal to the nodeIds that exist in the containedNodesPositions and an <code>{x:x,y:y}</code> position object. <br><br> For all nodeIds not listed in this returned object, we will position them at the location of the cluster. This is also the default behaviour when no releaseFunction is defined. </td> </tr> <tr id="methodLayout" class="subHeader"> <td colspan="2">Layout</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSeed', this);"> <td colspan="2"><span parent="getSeed" class="right-caret" id="method_getSeed"></span> getSeed()</td> </tr> <tr class="hidden" parent="clusterByHubsize"> </tr> <tr class="hidden" parent="getSeed"> <td class="midMethods">Returns: Number</td> <td>If you like the layout of your network and would like it to start in the same way next time, ask for the seed using this method and put it in the <code>layout.randomSeed</code> option. </td> </tr> <tr id="methodManipulation" class="subHeader"> <td colspan="2">Manipulation methods to use the manipulation system without GUI.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','enableEditMode', this);"> <td colspan="2"><span parent="enableEditMode" class="right-caret" id="method_enableEditMode"></span> enableEditMode()</td> </tr> <tr class="hidden" parent="enableEditMode"> <td class="midMethods">Returns: none</td> <td>Programatically enable the edit mode. Similar effect to pressing the edit button.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','disableEditMode', this);"> <td colspan="2"><span parent="disableEditMode" class="right-caret" id="method_disableEditMode"></span> disableEditMode()</td> </tr> <tr class="hidden" parent="disableEditMode"> <td class="midMethods">Returns: 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 class="collapsible toggle" onclick="toggleTable('methodTable','addNodeMode', this);"> <td colspan="2"><span parent="addNodeMode" class="right-caret" id="method_addNodeMode"></span> addNodeMode()</td> </tr> <tr class="hidden" parent="addNodeMode"> <td class="midMethods">Returns: 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 class="collapsible toggle" onclick="toggleTable('methodTable','editNode', this);"> <td colspan="2"><span parent="editNode" class="right-caret" id="method_editNode"></span> editNode()</td> </tr> <tr class="hidden" parent="editNode"> <td class="midMethods">Returns: none</td> <td>Edit the selected node. The explaination from <code>addNodeMode</code> applies here as well.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','addEdgeMode', this);"> <td colspan="2"><span parent="addEdgeMode" class="right-caret" id="method_addEdgeMode"></span> addEdgeMode()</td> </tr> <tr class="hidden" parent="addEdgeMode"> <td class="midMethods">Returns: none</td> <td>Go into addEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','editEdgeMode', this);"> <td colspan="2"><span parent="editEdgeMode" class="right-caret" id="method_editEdgeMode"></span> editEdgeMode()</td> </tr> <tr class="hidden" parent="editEdgeMode"> <td class="midMethods">Returns: none</td> <td>Go into editEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','deleteSelected', this);"> <td colspan="2"><span parent="deleteSelected" class="right-caret" id="method_deleteSelected"></span> deleteSelected()</td> </tr> <tr class="hidden" parent="deleteSelected"> <td class="midMethods">Returns: none</td> <td>Delete selected. Having edit mode or manipulation enabled is not required.</td> </tr> <tr id="methodInformation" class="subHeader"> <td colspan="2">Methods to get information on nodes and edges.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getPositions', this);"> <td colspan="2"><span parent="getPositions" class="right-caret" id="method_getPositions"></span> getPositions(<code><i>[Array of nodeIds]</i></code>) </td> </tr> <tr class="hidden" parent="getPositions"> <td class="midMethods">Returns: Object</td> <td>Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object: <pre class="code"> { nodeId1: {x: xValue, y:yValue}, nodeId2: {x: xValue, y:yValue}, ... } </pre> Alternative inputs are a String containing a nodeId or nothing. When a String is supplied, the position of the node corresponding to the ID is returned. When nothing is supplied, the positions of all nodes are returned. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','storePositions', this);"> <td colspan="2"><span parent="storePositions" class="right-caret" id="method_storePositions"></span> storePositions()</td> </tr> <tr class="hidden" parent="storePositions"> <td class="midMethods">Returns: none</td> <td>When using the vis.DataSet to load your nodes into the network, this method will put the X and Y positions of all nodes into that dataset. If you're loading your nodes from a database and have this dynamically coupled with the DataSet, you can use this to stablize your network once, then save the positions in that database through the DataSet so the next time you load the nodes, stabilization will be near instantaneous. <br><br> If the nodes are still moving and you're using dynamic smooth edges (which is on by default), you can use the option <code>stabilization.onlyDynamicEdges</code> in the <a href="physics.html">physics module</a> to improve initialization time. <br><br> <b>This method does not support clustering. At the moment it is not possible to cache positions when using clusters since they cannot be correctly initialized from just the positions.</b> </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','moveNode', this);"> <td colspan="2"><span parent="moveNode" class="right-caret" id="method_moveNode"></span> moveNode(<code><i>nodeId, Number x, Number y</i></code>)</td> </tr> <tr class="hidden" parent="moveNode"> <td class="midMethods">Returns: none</td> <td>You can use this to programatically move a node. <i>The supplied x and y positions have to be in canvas space!</i> </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBoundingBox', this);"> <td colspan="2"><span parent="getBoundingBox" class="right-caret" id="method_getBoundingBox"></span> getBoundingBox(<code><i>String nodeId</i></code>) </td> </tr> <tr class="hidden" parent="getBoundingBox"> <td class="midMethods">Returns: Object</td> <td> Returns a bounding box for the node including label in the format: <pre class="code"> { top: Number, left: Number, right: Number, bottom: Number } </pre> These values are in canvas space. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedNodes', this);"> <td colspan="2"><span parent="getConnectedNodes" class="right-caret" id="method_getConnectedNodes"></span> getConnectedNodes(<code><i>String nodeId or edgeId, [String direction]</i></code>) </td> </tr> <tr class="hidden" parent="getConnectedNodes"> <td class="midMethods">Returns: Array</td> <td>Returns an array of nodeIds of all the nodes that are directly connected to this node or edge.<br><br> For a node id, returns an array with the id's of the connected nodes.<br> If optional parameter <code>direction</code> is set to string <i>'from'</i>, only parent nodes are returned.<br> If <code>direction</code> is set to <i>'to'</i>, only child nodes are returned.<br> Any other value or <code>undefined</code> returns both parent and child nodes. <br><br> For an edge id, returns an array: <code>[fromId, toId]</code>. Parameter <i>direction</i> is ignored for edges.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedEdges', this);"> <td colspan="2"><span parent="getConnectedEdges" class="right-caret" id="method_getConnectedEdges"></span> getConnectedEdges(<code><i>String nodeId</i></code>) </td> </tr> <tr class="hidden" parent="getConnectedEdges"> <td class="midMethods">Returns: Array</td> <td>Returns an array of edgeIds of the edges connected to this node.</td> </tr> <tr id="methodPhysics" class="subHeader"> <td colspan="2">Physics methods to control when the simulation should run.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','startSimulation', this);"> <td colspan="2"><span parent="startSimulation" class="right-caret" id="method_startSimulation"></span> startSimulation()</td> </tr> <tr class="hidden" parent="startSimulation"> <td class="midMethods">Returns: none</td> <td>Start the physics simulation. This is normally done whenever needed and is only really useful if you stop the simulation yourself and wish to continue it afterwards. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','stopSimulation', this);"> <td colspan="2"><span parent="stopSimulation" class="right-caret" id="method_stopSimulation"></span> stopSimulation()</td> </tr> <tr class="hidden" parent="stopSimulation"> <td class="midMethods">Returns: none</td> <td>This stops the physics simulation and triggers a <code>stabilized</code> event. It can be restarted by dragging a node, altering the dataset or calling <code>startSimulation()</code>. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','stabilize', this);"> <td colspan="2"><span parent="stabilize" class="right-caret" id="method_stabilize"></span> stabilize([iterations])</td> </tr> <tr class="hidden" parent="stabilize"> <td class="midMethods">Returns: none</td> <td>You can manually call stabilize at any time. All the stabilization options above are used. You can optionally supply the number of iterations it should do.</td> </tr> <tr id="methodSelection" class="subHeader"> <td colspan="2">Selection methods for nodes and edges.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelection', this);"> <td colspan="2"><span parent="getSelection" class="right-caret" id="method_getSelection"></span> getSelection()</td> </tr> <tr class="hidden" parent="getSelection"> <td class="midMethods">Returns: Object</td> <td>Returns an object with selected nodes and edges ids like this: <pre class="code"> { nodes: [Array of selected nodeIds], edges: [Array of selected edgeIds] }</pre> </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedNodes', this);"> <td colspan="2"><span parent="getSelectedNodes" class="right-caret" id="method_getSelectedNodes"></span> getSelectedNodes()</td> </tr> <tr class="hidden" parent="getSelectedNodes"> <td class="midMethods">Returns: Array</td> <td>Returns an array of selected node ids like so: <code>[nodeId1, nodeId2, ..]</code>. </td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedEdges', this);"> <td colspan="2"><span parent="getSelectedEdges" class="right-caret" id="method_getSelectedEdges"></span> getSelectedEdges()</td> </tr> <tr class="hidden" parent="getSelectedEdges"> <td class="midMethods">Returns: Array</td> <td>Returns an array of selected edge ids like so: <code>[edgeId1, edgeId2, ..]</code>.</td> </tr> <tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodeAt', this);"> <td colspan="2"><span parent="getNodeAt" class="right-caret" id="method_getNodeAt"></span> getNodeAt(<code><i>{x: xPosition DOM, y: yPosition DOM}</i></code>) </td> </tr> <tr class="hidden" parent="getNodeAt"> <td class="midMethods">Returns: String</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 class="collapsible toggle" onclick="toggleTable('methodTable','getEdgeAt', this);"> <td colspan="2"><span parent="getEdgeAt" class="right-caret" id="method_getEdgeAt"></span> getEdgeAt(<code><i>{x: xPosition DOM, y: yPosition DOM}</i></code>) </td> </tr> <tr class="hidden" parent="getEdgeAt"> <td class="midMethods">Returns: String</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 class="collapsible toggle" onclick="toggleTable('methodTable','selectNodes', this);"> <td colspan="2"><span parent="selectNodes" class="right-caret" id="method_selectNodes"></span> selectNodes(<code><i>Array with nodeIds</i></code>,<code><i>[Boolean highlightEdges]</i></code>) </td> </tr> <tr class="hidden" parent="selectNodes"> <td class="midMethods">Returns: 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>. </