@ -7,7 +7,6 @@
< meta name = "viewport" content = "width=device-width, initial-scale=1" > < meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "" > < meta name = "description" content = "" >
< meta name = "author" content = "" > < meta name = "author" content = "" >
< link rel = "icon" HREF = "favicon.ico" >
< title > vis.js - A dynamic, browser based visualization library.< / title > < title > vis.js - A dynamic, browser based visualization library.< / title >
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
@ -51,7 +50,18 @@
} }
tr.subHeader td { tr.subHeader td {
padding-top: 40px;
padding-top: 30px;
}
td.mid {
width: 150px;
background-color: #ffffff;
border: 1px solid #dddddd;
}
tr.visible td {
padding: 10px;
} }
< / style > < / style >
@ -75,7 +85,7 @@
< span class = "icon-bar" > < / span > < span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span > < span class = "icon-bar" > < / span >
< / button > < / button >
< a class = "navbar-brand hidden-sm" href = "./index.html" > vis.js< / a >
< a class = "navbar-brand hidden-sm" href = "http://www .visjs.org /index.html" > vis.js< / a >
< / div > < / div >
< div id = "navbar" class = "navbar-collapse collapse" > < div id = "navbar" class = "navbar-collapse collapse" >
< ul class = "nav navbar-nav" > < ul class = "nav navbar-nav" >
@ -241,216 +251,258 @@ network.setOptions(options);
< h3 > All Methods< / h3 > < h3 > All Methods< / h3 >
< p > This is a list of all the methods in the public API. They have been grouped by category, which correspond to the < 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. They are initially collapsed and colored alternatively.< / p >
< table class = "moduleTable" id = "moduleTable" >
< tr class = "header" >
< td class = "methodName" > name< / td >
< td > returns< / td >
< td > description< / td >
modules listed above.< / p >
< table class = "moduleTable" id = "methodTable" >
< tr class = "subHeader" >
< td colspan = "2" > Global methods for the network.< / td >
< / tr > < / tr >
< tr class = "subHeader evenRow toggle collapsible" onclick = "toggleTable('moduleTable','global ', this);" >
< td colspan = "3 " > < span parent = "color " class = "right-caret" > < / span > Global methods for the network. < / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','destroy', this);" >
< td colspan = "2 " > < span parent = "destroy " class = "right-caret" > < / span > destroy() < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "global" >
< td > destroy()< / td >
< td class = "mid" > none< / td >
< tr class = "hidden" parent = "destroy" >
< td class = "mid" > Returns: none< / td >
< td > Remove the network from the DOM and remove all Hammer bindings and references.< / td > < td > Remove the network from the DOM and remove all Hammer bindings and references.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "global" >
< td > setData({< br > < code > < i > nodes: vis DataSet/Array< / i > < / code > ,< br > < code > < i > edges: vis
DataSet/Arary< / i > < / code > < br > })
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','setData', this);" >
< td colspan = "2" > < span parent = "setData" class = "right-caret" > < / span > setData({< code > < i > nodes: vis
DataSet/Array< / i > < / code > ,< code > < i > edges: vis
DataSet/Array< / i > < / code > })
< / td > < / td >
< td class = "mid" > none< / td >
< / tr >
< tr class = "hidden" parent = "setData" >
< td class = "mid" > Returns: none< / td >
< td > Override all the data in the network. If stabilization is enabled in the < a href = "physics.html" > physics < 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 module< / a > , the network will stabilize again. This method is also performed when first initializing the
network. network.
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "global" >
< td > setOptions(< code > Object options< / code > )< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','setOptions', this);" >
< td colspan = "2" > < span parent = "setOptions" class = "right-caret" > < / span > setOptions(< code > Object options< / code > )
< / td >
< / tr >
< tr class = "hidden" parent = "setOptions" >
< td class = "mid" > Returns: none< / td >
< td > Set the options. All available options can be found in the modules above. Each module requires it's own < 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. container with the module name to contain its options.
< / td > < / td >
< / tr > < / tr >
< tr class = "subHeader oddRow toggle collapsible" onclick = "toggleTable('moduleTable','canvas', this); " >
< td colspan = "3 " > < span parent = "color" class = "right-caret" > < / span > < / td >
< tr class = "subHeader" >
< td colspan = "2 " > Methods related to the canvas.< / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "canvas" >
< td > canvasToDOM({< br > < code > < i > x: Number< / i > < / code > ,< br > < code > < i > y:
Number< / i > < / code > < br > })
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','canvasToDOM', this);" >
< td colspan = "2" > < span parent = "canvasToDOM" class = "right-caret" > < / span > canvasToDOM({< code > < i > x:
Number< / i > < / code > ,< code > < i > y:
Number< / i > < / code > })
< / td > < / td >
< td class = "mid" > Object< / td >
< / tr >
< tr class = "hidden" parent = "canvasToDOM" >
< td class = "mid" > Returns: Object< / td >
< td > This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of < 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. < code > {x:Number,y:Number}< / code > . The DOM values are relative to the network container.
< / td > < / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "canvas" >
< td > DOMtoCanvas({< br > < code > < i > x: Number< / i > < / code > ,< br > < code > < i > y:
Number< / i > < / code > < br > })
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','DOMtoCanvas', this);" >
< td colspan = "2" > < span parent = "DOMtoCanvas" class = "right-caret" > < / span > DOMtoCanvas({< code > < i > x:
Number< / i > < / code > ,< code > < i > y:
Number< / i > < / code > })
< / td > < / td >
< td class = "mid" > Object< / td >
< / tr >
< tr class = "hidden" parent = "DOMtoCanvas" >
< td class = "mid" > Returns: Object< / td >
< td > This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of < 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. < code > {x:Number,y:Number}< / code > . The DOM values are relative to the network container.
< / td > < / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "canvas" >
< td > redraw()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','redraw', this);" >
< td colspan = "2" > < span parent = "redraw" class = "right-caret" > < / span > redraw()< / td >
< / tr >
< tr class = "hidden" parent = "redraw" >
< td class = "mid" > Returns: none< / td >
< td > Redraw the network.< / td > < td > Redraw the network.< / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "canvas " >
< td > setSize(< br > < code > < i > String width< / i > < / code > ,< br > < code > < i > String
height< / i > < / code > < br >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','setSize', this); " >
< td colspan = "2" > < span parent = "setSize" class = "right-caret" > < / span > setSize( < code > < i > String width< / i > < / code > ,< code > < i > String
height< / i > < / code > )
< / td > < / td >
< td class = "mid" > none< / td >
< / tr >
< tr class = "hidden" parent = "setSize" >
< td class = "mid" > Returns: none< / td >
< td > Set the size of the canvas. This is automatically done on a window resize.< / td > < td > Set the size of the canvas. This is automatically done on a window resize.< / td >
< / tr > < / tr >
< tr class = "subHeader evenRow toggle collapsible" onclick = "toggleTable('moduleTable','clustering', this); " >
< td colspan = "3 " > < span parent = "color" class = "right-caret" > < / span > < / td >
< tr class = "subHeader" >
< td colspan = "2 " > Clustering< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "clustering " >
< td > cluster(< br >
< code > Object options< / code > < br >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','cluster', this); " >
< td colspan = "2" > < span parent = "cluster" class = "right-caret" > < / span > cluster(
< code > Object options< / code > )
< / td > < / td >
< td class = "mid" > none< / td >
< / tr >
< tr class = "hidden" parent = "cluster" >
< td class = "mid" > Returns: none< / td >
< td > The options object is explained in full < a data-scroll = "" < td > The options object is explained in full < a data-scroll = ""
data-options="{ " easing" : " easeInCubic" }" data-options="{ " easing" : " easeInCubic" }"
href="#optionsObject">below< / a > . The joinCondition function href="#optionsObject">below< / a > . The joinCondition function
is presented with all nodes. is presented with all nodes.
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "clustering " >
< td > clusterByConnection(< br >
< code > String nodeId< / code > ,< br >
< code > [Object options]< / code > < br >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','clusterByConnection', this); " >
< td colspan = "2" > < span parent = "clusterByConnection" class = "right-caret" > < / span > clusterByConnection(
< code > String nodeId< / code > ,
< code > [Object options]< / code >
) )
< / td > < / td >
< td class = "mid" > none< / td >
< / tr >
< tr class = "hidden" parent = "clusterByConnection" >
< td class = "mid" > Returns: none< / td >
< td > This method looks at the provided node and makes a cluster of it and all it's connected nodes. The < 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 behaviour can be customized by proving the options object. All options of this object are explained < a
data-scroll="" data-options="{ " easing" : " easeInCubic" }" data-scroll="" data-options="{ " easing" : " easeInCubic" }"
href="#optionsObject">below< / a > . The joinCondition is only presented with the connected nodes. href="#optionsObject">below< / a > . The joinCondition is only presented with the connected nodes.
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "clustering " >
< td > clusterByHubsize(< br >
< code > Number hubsize< / code > ,< br >
< code > [Object options]< / code > < br > )
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','clusterByHubsize', this); " >
< td colspan = "2" > < span parent = "clusterByHubsize" class = "right-caret" > < / span > clusterByHubsize(
< code > Number hubsize< / code > ,
< code > [Object options]< / code > )
< / td > < / td >
< td class = "mid" > none< / td >
< / tr >
< tr class = "hidden" parent = "clusterByHubsize" >
< td class = "mid" > Returns: none< / td >
< td > This method checks all nodes in the network and those with a equal or higher amount of edges than < 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 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. options object is described for < code > clusterByConnection< / code > and does the same here.
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "clustering" >
< td > clusterOutliers(< br >
< code > [Object options] < / code > < b r> )
< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','clusterOutliers', this);" >
< td colspan = "2" > < span parent = "clusterOutl iers" class = "right-caret " > < / span > clusterOutliers(
< code > [Object options]< / code > )
< / tr >
< tr class = "hidden" parent = "clusterOutliers" >
< td class = "mid" > Returns: none< / td >
< td > This method will cluster all nodes with 1 edge with their respective connected node.< / td > < td > This method will cluster all nodes with 1 edge with their respective connected node.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "clustering" >
< td > findNode(< br >
< code > String nodeId< / code > < br > )
< / td >
< td class = "mid" > Array< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','findNode', this);" >
< td colspan = "2" > < span parent = "findNode" class = "right-caret" > < / span > findNode(
< code > String nodeId< / code > )
< / tr >
< tr class = "hidden" parent = "findNode" >
< td class = "mid" > Returns: Array< / td >
< td > Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds < td > Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds
showing where the node is. Example: < br >
cluster 'A' contains cluster 'B',< br >
cluster 'B' contains cluster 'C',< br >
cluster 'C' contains node 'fred'.< br >
showing where the node is. < br > < br > Example:
cluster 'A' contains cluster 'B',
cluster 'B' contains cluster 'C',
cluster 'C' contains node 'fred'.
< code > network.clustering.findNode('fred')< / code > will return < code > ['A','B','C','fred']< / code > . < code > network.clustering.findNode('fred')< / code > will return < code > ['A','B','C','fred']< / code > .
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "clustering" >
< td > isCluster(< br >
< code > String nodeId< / code > < br > )
< / td >
< td class = "mid" > Boolean< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','isCluster', this);" >
< td colspan = "2" > < span parent = "isCluster" class = "right-caret" > < / span > isCluster(
< code > String nodeId< / code > )
< / tr >
< tr class = "hidden" parent = "isCluster" >
< td class = "mid" > Returns: Boolean< / td >
< td > Returns true if the node whose ID has been supplied is a cluster.< / td > < td > Returns true if the node whose ID has been supplied is a cluster.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "clustering" >
< td > openCluster(< br >
< code > String nodeId< / code > < br > )
< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','openCluster', this);" >
< td colspan = "2" > < span parent = "openCluster" class = "right-caret" > < / span > openCluster(
< code > String nodeId< / code > )
< / tr >
< tr class = "hidden" parent = "openCluster" >
< td class = "mid" > Returns: none< / td >
< td > Opens the cluster, releases the contained nodes and edges, removing the cluster node and cluster < td > Opens the cluster, releases the contained nodes and edges, removing the cluster node and cluster
edges. edges.
< / td > < / td >
< / tr > < / tr >
< tr class = "subHeader oddRow " >
< td colspan = "3 " > Layout< / td >
< tr class = "subHeader" >
< td colspan = "2 " > Layout< / td >
< / tr > < / tr >
< tr class = "oddRow" >
< td > getSeed()< / td >
< td class = "mid" > Number< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getSeed', this);" >
< td colspan = "2" > < span parent = "getSeed" class = "right-caret" > < / span > getSeed()< / td >
< / tr >
< tr class = "hidden" parent = "clusterByHubsize" >
< / tr >
< tr class = "hidden" parent = "getSeed" >
< td class = "mid" > 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 < 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 > randomSeed< / code > option.
seed using this method and put it in the < code > layout. randomSeed< / code > option.
< / td > < / td >
< / tr > < / tr >
< tr class = "subHeader evenRow toggle collapsible" onclick = "toggleTable('moduleTable','manipulation', this);" >
< td colspan = "3" > < span parent = "color" class = "right-caret" > < / span > Manipulation methods to use the
manipulation system without GUI.
< / td >
< tr class = "subHeader" >
< td colspan = "2" > Manipulation methods to use the manipulation system without GUI.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "manipulation" >
< td > enableEditMode()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','enableEditMode', this);" >
< td colspan = "2" > < span parent = "enableEditMode" class = "right-caret" > < / span > enableEditMode()< / td >
< / tr >
< tr class = "hidden" parent = "enableEditMode" >
< td class = "mid" > Returns: none< / td >
< td > Programatically enable the edit mode. Similar effect to pressing the edit button.< / td > < td > Programatically enable the edit mode. Similar effect to pressing the edit button.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "manipulation" >
< td > disableEditMode()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','disableEditMode', this);" >
< td colspan = "2" > < span parent = "disableEditMode" class = "right-caret" > < / span > disableEditMode()< / td >
< / tr >
< tr class = "hidden" parent = "disableEditMode" >
< td class = "mid" > Returns: none< / td >
< td > Programatically disable the edit mode. Similar effect to pressing the close icon (small cross in the < td > Programatically disable the edit mode. Similar effect to pressing the close icon (small cross in the
corner of the toolbar). corner of the toolbar).
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "manipulation" >
< td > addNodeMode()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','addNodeMode', this);" >
< td colspan = "2" > < span parent = "addNodeMode" class = "right-caret" > < / span > addNodeMode()< / td >
< / tr >
< tr class = "hidden" parent = "addNodeMode" >
< td class = "mid" > Returns: none< / td >
< td > Go into addNode mode. Having edit mode or manipulation enabled is not required. To get out of this mode, < 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 > 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 still apply. To use these methods without having the manipulation GUI, make sure you set
< code > enabled< / code > to false. < code > enabled< / code > to false.
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "manipulation" >
< td > editNodeMode()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','editNodeMode', this);" >
< td colspan = "2" > < span parent = "editNodeMode" class = "right-caret" > < / span > editNodeMode()< / td >
< / tr >
< tr class = "hidden" parent = "editNodeMode" >
< td class = "mid" > Returns: none< / td >
< td > Go into editNode mode. The explaination from < code > addNodeMode< / code > applies here as well.< / td > < td > Go into editNode mode. The explaination from < code > addNodeMode< / code > applies here as well.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "manipulation" >
< td > addEdgeMode()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','addEdgeMode', this);" >
< td colspan = "2" > < span parent = "addEdgeMode" class = "right-caret" > < / span > addEdgeMode()< / td >
< / tr >
< tr class = "hidden" parent = "addEdgeMode" >
< td class = "mid" > Returns: none< / td >
< td > Go into addEdge mode. The explaination from < code > addNodeMode< / code > applies here as well.< / td > < td > Go into addEdge mode. The explaination from < code > addNodeMode< / code > applies here as well.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "manipulation" >
< td > editEdgeMode()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','editEdgeMode', this);" >
< td colspan = "2" > < span parent = "editEdgeMode" class = "right-caret" > < / span > editEdgeMode()< / td >
< / tr >
< tr class = "hidden" parent = "editEdgeMode" >
< td class = "mid" > Returns: none< / td >
< td > Go into editEdge mode. The explaination from < code > addNodeMode< / code > applies here as well.< / td > < td > Go into editEdge mode. The explaination from < code > addNodeMode< / code > applies here as well.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "manipulation" >
< td > deleteSelected()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','deleteSelected', this);" >
< td colspan = "2" > < span parent = "deleteSelected" class = "right-caret" > < / span > deleteSelected()< / td >
< / tr >
< tr class = "hidden" parent = "deleteSelected" >
< td class = "mid" > Returns: none< / td >
< td > Delete selected. Having edit mode or manipulation enabled is not required.< / td > < td > Delete selected. Having edit mode or manipulation enabled is not required.< / td >
< / tr > < / tr >
< tr class = "subHeader oddRow toggle collapsible" onclick = "toggleTable('moduleTable','nodes', this); " >
< td colspan = "3 " > < span parent = "color" class = "right-caret" > < / span > < / td >
< tr class = "subHeader" >
< td colspan = "2 " > Methods to get information on nodes.< / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "nodes" >
< td > getPositions(< br > < code > < i > [Array of nodeIds]< / i > < / code > < br > )< / td >
< td class = "mid" > Object< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getPositions', this);" >
< td colspan = "2" > < span parent = "getPositions" class = "right-caret" > < / span > getPositions(< code > < i > [Array of
nodeIds]< / i > < / code > )
< / td >
< / tr >
< tr class = "hidden" parent = "getPositions" >
< td class = "mid" > Returns: Object< / td >
< td > Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object: < td > Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object:
< pre class = "code" > < pre class = "code" >
{ {
@ -464,16 +516,19 @@ network.setOptions(options);
are returned. are returned.
< / td > < / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "nodes" >
< td > storePositions()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','storePositions', this);" >
< td colspan = "2" > < span parent = "storePositions" class = "right-caret" > < / span > storePositions()< / td >
< / tr >
< tr class = "hidden" parent = "storePositions" >
< td class = "mid" > Returns: none< / td >
< td > When using the vis.DataSet to load your nodes into the network, this method will put the X and Y < 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. < br > < br > If you're loading your nodes from a database and have
positions of all nodes into that dataset. If you're loading your nodes from a database and have
this dynamically coupled with this dynamically coupled with
the DataSet, you can the DataSet, you can
use this to stablize your network once, then save the positions in that database through the DataSet so use this to stablize your network once, then save the positions in that database through the DataSet so
the next the next
time you load the nodes, stabilization will be near instantaneous.< br > < br >
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 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 use the option < code > stabilization.onlyDynamicEdges< / code > in the < a href = "physics.html" > physics
module< / a > module< / a >
@ -486,9 +541,13 @@ network.setOptions(options);
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "nodes" >
< td > getBoundingBox(< br > < code > < i > String nodeId< / i > < / code > < br > )< / td >
< td class = "mid" > Object< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getBoundingBox', this);" >
< td colspan = "2" > < span parent = "getBoundingBox" class = "right-caret" > < / span > getBoundingBox(< code > < i > String
nodeId< / i > < / code > )
< / td >
< / tr >
< tr class = "hidden" parent = "getBoundingBox" >
< td class = "mid" > Returns: Object< / td >
< td > Returns a bounding box for the node including label in the format: < td > Returns a bounding box for the node including label in the format:
< pre class = "code" > < pre class = "code" >
{ {
@ -501,50 +560,64 @@ network.setOptions(options);
These values are in canvas space. These values are in canvas space.
< / td > < / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "nodes" >
< td > getConnectedNodes(< br > < code > < i > String nodeId< / i > < / code > < br > )< / td >
< td class = "mid" > Array< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getConnectedNodes', this);" >
< td colspan = "2" > < span parent = "getConnectedNodes" class = "right-caret" > < / span > getConnectedNodes(< code > < i > String
nodeId< / i > < / code > )
< / td >
< / tr >
< tr class = "hidden" parent = "getConnectedNodes" >
< td class = "mid" > Returns: Array< / td >
< td > Returns an array of nodeIds of the all the nodes that are directly connected to this node.< / td > < td > Returns an array of nodeIds of the all the nodes that are directly connected to this node.< / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "nodes" >
< td > getEdges(< br > < code > < i > String nodeId< / i > < / code > < br > )< / td >
< td class = "mid" > Array< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getEdges', this);" >
< td colspan = "2" > < span parent = "getEdges" class = "right-caret" > < / span > getEdges(< code > < i > String
nodeId< / i > < / code > )
< / td >
< / tr >
< tr class = "hidden" parent = "getEdges" >
< td class = "mid" > Returns: Array< / td >
< td > Returns an array of edgeIds of the edges connected to this node.< / td > < td > Returns an array of edgeIds of the edges connected to this node.< / td >
< / tr > < / tr >
< tr class = "subHeader evenRow toggle collapsible" onclick = "toggleTable('moduleTable','physics', this);" >
< td colspan = "3" > < span parent = "color" class = "right-caret" > < / span > Physics methods to control when the
simulation should run.
< / td >
< tr class = "subHeader" >
< td colspan = "2" > Physics methods to control when the simulation should run.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "physics" >
< td > startSimulation()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','startSimulation', this);" >
< td colspan = "2" > < span parent = "startSimulation" class = "right-caret" > < / span > startSimulation()< / td >
< / tr >
< tr class = "hidden" parent = "startSimulation" >
< td class = "mid" > Returns: none< / td >
< td > Start the physics simulation. This is normally done whenever needed and is only really useful if you < 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. stop the simulation yourself and wish to continue it afterwards.
< / td > < / td >
.< / td > < / tr > .< / td > < / tr >
< tr class = "evenRow hidden" parent = "physics" >
< td > stopSimulation()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','stopSimulation', this);" >
< td colspan = "2" > < span parent = "stopSimulation" class = "right-caret" > < / span > stopSimulation()< / td >
< / tr >
< tr class = "hidden" parent = "stopSimulation" >
< td class = "mid" > Returns: none< / td >
< td > This stops the physics simulation and triggers a < code > stabilized< / code > event. It can be restarted by < 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 > . dragging a node, altering the dataset or calling < code > startSimulation()< / code > .
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "physics" >
< td > stabilize()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','stabilize', this);" >
< td colspan = "2" > < span parent = "stabilize" class = "right-caret" > < / span > stabilize()< / td >
< / tr >
< tr class = "hidden" parent = "stabilize" >
< td class = "mid" > Returns: none< / td >
< td > You can manually call stabilize at any time. All the stabilization options above are used.< / td > < td > You can manually call stabilize at any time. All the stabilization options above are used.< / td >
< / tr > < / tr >
< tr class = "subHeader oddRow toggle collapsible" onclick = "toggleTable('moduleTable','selection', this); " >
< td colspan = "3 " > < span parent = "color" class = "right-caret" > < / span > < / td >
< tr class = "subHeader" >
< td colspan = "2 " > Selection methods for nodes and edges.< / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "selection" >
< td > getSelection()< / td >
< td class = "mid" > Object< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getSelection', this);" >
< td colspan = "2" > < span parent = "getSelection" class = "right-caret" > < / span > getSelection()< / td >
< / tr >
< tr class = "hidden" parent = "getSelection" >
< td class = "mid" > Returns: Object< / td >
< td > Returns an object with selected nodes and edges ids like this: < td > Returns an object with selected nodes and edges ids like this:
< pre class = "code" > < pre class = "code" >
{ {
@ -554,77 +627,102 @@ network.setOptions(options);
< / td > < / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "selection" >
< td > getSelectedNodes()< / td >
< td class = "mid" > Array< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getSelectedNodes', this);" >
< td colspan = "2" > < span parent = "getSelectedNodes" class = "right-caret" > < / span > getSelectedNodes()< / td >
< / tr >
< tr class = "hidden" parent = "getSelectedNodes" >
< td class = "mid" > Returns: Array< / td >
< td > Returns an array of selected node ids like so: < td > Returns an array of selected node ids like so:
< code > [nodeId1, nodeId2, ..]< / code > . < code > [nodeId1, nodeId2, ..]< / code > .
< / td > < / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "selection" >
< td > getSelectedEdges()< / td >
< td class = "mid" > Array< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getSelectedEdges', this);" >
< td colspan = "2" > < span parent = "getSelectedEdges" class = "right-caret" > < / span > getSelectedEdges()< / td >
< / tr >
< tr class = "hidden" parent = "getSelectedEdges" >
< td class = "mid" > Returns: Array< / td >
< td > Returns an array of selected edge ids like so: < code > [edgeId1, edgeId2, ..]< / code > .< / td > < td > Returns an array of selected edge ids like so: < code > [edgeId1, edgeId2, ..]< / code > .< / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "selection" >
< td > getNodeAt(< br > < code > < i > {x: xPosition DOM,< br > y: yPosition DOM}< / i > < / code > < br > )
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getNodeAt', this);" >
< td colspan = "2" > < span parent = "getNodeAt" class = "right-caret" > < / span > getNodeAt(< code > < i > {x: xPosition
DOM, y: yPosition DOM}< / i > < / code > )
< / td > < / td >
< td class = "mid" > String< / td >
< / tr >
< tr class = "hidden" parent = "getNodeAt" >
< td class = "mid" > Returns: String< / td >
< td > Returns a nodeId or undefined. The DOM positions are expected to be in pixels from the top left corner < td > Returns a nodeId or undefined. The DOM positions are expected to be in pixels from the top left corner
of the canvas. of the canvas.
< / td > < / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "selection" >
< td > getEdgeAt(< br > < code > < i > {x: xPosition DOM,< br > y: yPosition DOM}< / i > < / code > < br > )
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getEdgeAt', this);" >
< td colspan = "2" > < span parent = "getEdgeAt" class = "right-caret" > < / span > getEdgeAt(< code > < i > {x: xPosition
DOM, y: yPosition DOM}< / i > < / code > )
< / td > < / td >
< td class = "mid" > String< / code > < / td >
< / tr >
< tr class = "hidden" parent = "getEdgeAt" >
< td class = "mid" > Returns: String< / code > < / td >
< td > Returns a edgeId or undefined. The DOM positions are expected to be in pixels from the top left corner < td > Returns a edgeId or undefined. The DOM positions are expected to be in pixels from the top left corner
of the canvas.. of the canvas..
< / td > < / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "selection" >
< td > selectNodes(< br > < code > < i > Array with nodeIds< / i > < / code > ,< br > < code > < i > [Boolean
highlightEdges]< / i > < / code > < br > )
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','selectNodes', this);" >
< td colspan = "2" > < span parent = "selectNodes" class = "right-caret" > < / span > selectNodes(< code > < i > Array with
nodeIds< / i > < / code > ,< code > < i > [Boolean
highlightEdges]< / i > < / code > )
< / td > < / td >
< td class = "mid" > none< / td >
< / tr >
< tr class = "hidden" parent = "selectNodes" >
< td class = "mid" > Returns: none< / td >
< td > Selects the nodes corresponding to the id's in the input array. If highlightEdges is true or undefined, < 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 the neighbouring edges will also be selected. This method unselects all other objects before selecting
its own objects. < i > Does not fire events< / i > . its own objects. < i > Does not fire events< / i > .
< / td > < / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "selection" >
< td > selectEdges(< br > < code > < i > Array with edgeIds< / i > < / code > < br > )< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','selectEdges', this);" >
< td colspan = "2" > < span parent = "selectEdges" class = "right-caret" > < / span > selectEdges(< code > < i > Array with
edgeIds< / i > < / code > )
< / td >
< / tr >
< tr class = "hidden" parent = "selectEdges" >
< td class = "mid" > Returns: none< / td >
< td > Selects the edges corresponding to the id's in the input array. This method unselects all other objects < td > Selects the edges corresponding to the id's in the input array. This method unselects all other objects
before selecting its own objects. < i > Does not fire events< / i > . before selecting its own objects. < i > Does not fire events< / i > .
< / td > < / td >
< / tr > < / tr >
< tr class = "oddRow hidden" parent = "selection" >
< td > unselectAll()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','unselectAll', this);" >
< td colspan = "2" > < span parent = "unselectAll" class = "right-caret" > < / span > unselectAll()< / td >
< / tr >
< tr class = "hidden" parent = "unselectAll" >
< td class = "mid" > Returns: none< / td >
< td > Unselect all objects. < i > Does not fire events< / i > .< / td > < td > Unselect all objects. < i > Does not fire events< / i > .< / td >
< / tr > < / tr >
< tr class = "subHeader evenRow toggle collapsible" onclick = "toggleTable('moduleTable','view', this);" >
< td colspan = "3" > < span parent = "color" class = "right-caret" > < / span > Methods to control the viewport for zoom
and animation.
< / td >
< tr class = "subHeader" >
< td colspan = "2" > Methods to control the viewport for zoom and animation.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "view" >
< td > getScale()< / td >
< td class = "mid" > Number< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','getScale', this);" >
< td colspan = "2" > < span parent = "getScale" class = "right-caret" > < / span > getScale()< / td >
< / tr >
< tr class = "hidden" parent = "getScale" >
< td class = "mid" > Returns: Number< / td >
< td > Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.< / td > < td > Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "view" >
< td > getPosition()< / td >
< td class = "mid" > Number< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','clusterByHubsize', this);" >
< td colspan = "2" > < span parent = "clusterByHubsize" class = "right-caret" > < / span > getPosition()< / td >
< / tr >
< tr class = "hidden" parent = "clusterByHubsize" >
< td class = "mid" > Returns: Number< / td >
< td > Returns the current central focus point of the camera.< / td > < td > Returns the current central focus point of the camera.< / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "view" >
< td > fit(< code > [Object options]< / code > )< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','fit', this);" >
< td colspan = "2" > < span parent = "fit" class = "right-caret" > < / span > fit(< code > [Object
options]< / code > )
< / td >
< / tr >
< tr class = "hidden" parent = "fit" >
< td class = "mid" > Returns: none< / td >
< td > Zooms out so all nodes fit on the canvas. You can supply options to customize this: < td > Zooms out so all nodes fit on the canvas. You can supply options to customize this:
< pre class = "code" > < pre class = "code" >
{ {
@ -640,12 +738,14 @@ network.setOptions(options);
All options are optional for the fit method. All options are optional for the fit method.
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "view " >
< td > focus(< br >
< code > String nodeId< / code > ,< br >
< code > [Object options]< / code > < br > )
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','focus', this); " >
< td colspan = "2" > < span parent = "focus" class = "right-caret" > < / span > focus(
< code > String nodeId< / code > ,
< code > [Object options]< / code > )
< / td > < / td >
< td class = "mid" > none< / td >
< / tr >
< tr class = "hidden" parent = "focus" >
< td class = "mid" > Returns: none< / td >
< td > You can focus on a node with this function. What that means is the view will lock onto that node, if it < td > You can focus on a node with this function. What that means is the view will lock onto that node, if it
is moving, the view will also move accordingly. If the view is dragged by the user, the focus is broken. is moving, the view will also move accordingly. If the view is dragged by the user, the focus is broken.
You can supply options to customize the effect: You can supply options to customize the effect:
@ -665,9 +765,13 @@ network.setOptions(options);
Default value is true. The options object is optional in the focus method. Default value is true. The options object is optional in the focus method.
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "view" >
< td > moveTo(< code > Object options< / code > )< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','moveTo', this);" >
< td colspan = "2" > < span parent = "moveTo" class = "right-caret" > < / span > moveTo(< code > Object
options< / code > )
< / td >
< / tr >
< tr class = "hidden" parent = "moveTo" >
< td class = "mid" > Returns: none< / td >
< td > You can animate or move the camera using the moveTo method. Options are: < td > You can animate or move the camera using the moveTo method. Options are:
< pre class = "code" > < pre class = "code" >
{ {
@ -680,23 +784,25 @@ network.setOptions(options);
} }
} }
< / pre > < / pre >
The position (in canvas units!) is the position of the central focus point of the camera. < br > < br >
The scale is the target zoomlevel. Default value is 1.0. < br > < br >
The position (in canvas units!) is the position of the central focus point of the camera.
The scale is the target zoomlevel. Default value is 1.0.
The offset (in DOM units) is how many pixels from the center the view is focussed. Default value is The offset (in DOM units) is how many pixels from the center the view is focussed. Default value is
{x:0,y:0}.< br > < br >
{x:0,y:0}.
For animation you can either use a Boolean to use it with the default options or disable it or you can For animation you can either use a Boolean to use it with the default options or disable it or you can
define the duration (in milliseconds) and easing function manually. Available are: define the duration (in milliseconds) and easing function manually. Available are:
< code > linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, < code > linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic,
easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint< / code > . easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint< / code > .
< br > < br >
< i > You will have to define at least a scale or a position. Otherwise, there is nothing to move to.< / i > < i > You will have to define at least a scale or a position. Otherwise, there is nothing to move to.< / i >
< / td > < / td >
< / tr > < / tr >
< tr class = "evenRow hidden" parent = "view" >
< td > releaseNode()< / td >
< td class = "mid" > none< / td >
< tr class = "collapsible toggle" onclick = "toggleTable('methodTable','releaseNode', this);" >
< td colspan = "2" > < span parent = "releaseNode" class = "right-caret" > < / span > releaseNode()< / td >
< / tr >
< tr class = "hidden" parent = "releaseNode" >
< td class = "mid" > Returns: none< / td >
< td > Programatically release the focussed node.< / td > < td > Programatically release the focussed node.< / td >
< / tr > < / tr >
@ -792,29 +898,6 @@ var options = {
< / table > < / table >
< h4 id = "locales" > 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 string. You can then
use your new key in the locale option.< / p >
< br > < br >
< br > < br >
jos
9 years ago