Click on the options shown to show how these options are supposed to be used.
+ The individual options are explained below. The ones referring to modules are explained in the corresponding
+ module.
+ This is a list of all the methods in the public API. They are collected here from all individual modules.
+ 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.
-
+
+
| destroy() |
none |
Remove the network from the DOM and remove all Hammer bindings and references. |
-
+
setData({
nodes: vis DataSet/Array,
edges: vis
DataSet/Arary
})
|
@@ -167,20 +266,782 @@
network.
-
+
setOptions(Object options) |
none |
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.
|
+
+
+
+
+ canvasToDOM({
x: Number,
y:
+ Number
})
+ |
+ Object |
+ This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of
+ {x:Number,y:Number}. The DOM values are relative to the network container.
+ |
+
+
+ DOMtoCanvas({
x: Number,
y:
+ Number
})
+ |
+ Object |
+ This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of
+ {x:Number,y:Number}. The DOM values are relative to the network container.
+ |
+
+ | redraw() | none | Redraw the network. |
+
+ setSize(
String width,
String
+ height
)
+ |
+ none |
+ Set the size of the canvas. This is automatically done on a window resize. |
+
+
+
+
+ cluster(
+ Object options
)
+ |
+ none |
+ The options object is explained in full below. The joinCondition function
+ is presented with all nodes.
+ |
+
+
+ clusterByConnection(
+ String nodeId,
+ [Object options]
+ )
+ |
+ none |
+ 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 below. The joinCondition is only presented with the connected nodes.
+ |
+
+
+ clusterByHubsize(
+ Number hubsize,
+ [Object options]
)
+ |
+ none |
+ This method checks all nodes in the network and those with a equal or higher amount of edges than
+ specified with the hubsize qualify. Cluster by connection is performed on each of them. The
+ options object is described for clusterByConnection and does the same here.
+ |
+
+
+
+ clusterOutliers(
+ [Object options]
)
+ |
+ none |
+ This method will cluster all nodes with 1 edge with their respective connected node. |
+
+
+ findNode(
+ String nodeId
)
+ |
+ Array |
+ Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds
+ showing where the node is. Example:
+ cluster 'A' contains cluster 'B',
+ cluster 'B' contains cluster 'C',
+ cluster 'C' contains node 'fred'.
+ network.clustering.findNode('fred') will return ['A','B','C','fred'].
+ |
+
+
+ isCluster(
+ String nodeId
)
+ |
+ Boolean |
+ Returns true if the node whose ID has been supplied is a cluster. |
+
+
+ openCluster(
+ String nodeId
)
+ |
+ none |
+ Opens the cluster, releases the contained nodes and edges, removing the cluster node and cluster
+ edges.
+ |
+
+
+
+
+ | getSeed() |
+ Number |
+ 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 randomSeed option.
+ |
+
+
+
+
+
+ | enableEditMode() |
+ none |
+ Programatically enable the edit mode. Similar effect to pressing the edit button. |
+
+
+ | disableEditMode() |
+ none |
+ Programatically disable the edit mode. Similar effect to pressing the close icon (small cross in the
+ corner of the toolbar).
+ |
+
+
+ | addNodeMode() |
+ none |
+ Go into addNode mode. Having edit mode or manipulation enabled is not required. To get out of this mode,
+ call disableEditMode(). The callback functions defined in handlerFunctions
+ still apply. To use these methods without having the manipulation GUI, make sure you set
+ enabled to false.
+ |
+
+
+ | editNodeMode() |
+ none |
+ Go into editNode mode. The explaination from addNodeMode applies here as well. |
+
+
+ | addEdgeMode() |
+ none |
+ Go into addEdge mode. The explaination from addNodeMode applies here as well. |
+
+
+ | editEdgeMode() |
+ none |
+ Go into editEdge mode. The explaination from addNodeMode applies here as well. |
+
+
+ | deleteSelected() |
+ none |
+ Delete selected. Having edit mode or manipulation enabled is not required. |
+
+
+
+
+
+ getPositions(
[Array of nodeIds]
) |
+ Object |
+ Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object:
+
+{
+ nodeId1: {x: xValue, y:yValue},
+ nodeId2: {x: xValue, y:yValue},
+ ...
+}
+
+ 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.
+ |
+
+
+ | storePositions() |
+ none |
+ 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.
+ If the nodes are still moving and you're using dynamic smooth edges (which is on by default), you can
+ use the option stabilization.onlyDynamicEdges in the physics
+ module
+ to improve initialization time.
+
+ 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.
+ |
+
+
+
+
+ getBoundingBox(
String nodeId
) |
+ Object |
+ Returns a bounding box for the node including label in the format:
+
+{
+ top: Number,
+ left: Number,
+ right: Number,
+ bottom: Number
+}
+
+ These values are in canvas space.
+ |
+
+
+ getConnectedNodes(
String nodeId
) |
+ Array |
+ Returns an array of nodeIds of the all the nodes that are directly connected to this node. |
+
+
+ getEdges(
String nodeId
) |
+ Array |
+ Returns an array of edgeIds of the edges connected to this node. |
+
+
+
+
+
+ | startSimulation() |
+ none |
+ 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.
+ |
+ .
+
+ | stopSimulation() |
+ none |
+ This stops the physics simulation and triggers a stabilized event. It can be restarted by
+ dragging a node, altering the dataset or calling startSimulation().
+ |
+
+
+ | stabilize() |
+ none |
+ You can manually call stabilize at any time. All the stabilization options above are used. |
+
+
+
+
+
+ | getSelection() |
+ Object |
+ Returns an object with selected nodes and edges ids like this:
+
+{
+ nodes: [Array of selected nodeIds],
+ edges: [Array of selected edgeIds]
+}
+ |
+
+
+
+ | getSelectedNodes() |
+ Array |
+ Returns an array of selected node ids like so:
+ [nodeId1, nodeId2, ..].
+ |
+
+
+ | getSelectedEdges() |
+ Array |
+ Returns an array of selected edge ids like so: [edgeId1, edgeId2, ..]. |
+
+
+ getNodeAt(
{x: xPosition DOM,
y: yPosition DOM}
)
+ |
+ String |
+ Returns a nodeId or undefined. The DOM positions are expected to be in pixels from the top left corner
+ of the canvas.
+ |
+
+
+ getEdgeAt(
{x: xPosition DOM,
y: yPosition DOM}
)
+ |
+ String |
+ Returns a edgeId or undefined. The DOM positions are expected to be in pixels from the top left corner
+ of the canvas..
+ |
+
+
+ selectNodes(
Array with nodeIds,
[Boolean
+ highlightEdges]
)
+ |
+ none |
+ 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. Does not fire events.
+ |
+
+
+ selectEdges(
Array with edgeIds
) |
+ none |
+ Selects the edges corresponding to the id's in the input array. This method unselects all other objects
+ before selecting its own objects. Does not fire events.
+ |
+
+
+ | unselectAll() |
+ none |
+ Unselect all objects. Does not fire events. |
+
+
+
+
+
+ | getScale() |
+ Number |
+ Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely. |
+
+
+ | getPosition() |
+ Number |
+ Returns the current central focus point of the camera. |
+
+
+
+ fit([Object options]) |
+ none |
+ Zooms out so all nodes fit on the canvas. You can supply options to customize this:
+
+{
+ nodes:[Array of nodeIds],
+ animation: { // -------------------> can be a boolean too!
+ duration: Number
+ easingFunction: String
+ }
+}
+
+ The nodes can be used to zoom to fit only specific nodes in the view.
+ The other options are explained in the moveTo() description below.
+ All options are optional for the fit method.
+ |
+
+
+ focus(
+ String nodeId,
+ [Object options]
)
+ |
+ none |
+ 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.
+ You can supply options to customize the effect:
+
+{
+ scale: Number,
+ offset: {x:Number, y:Number}
+ locked: boolean
+ animation: { // -------------------> can be a boolean too!
+ duration: Number
+ easingFunction: String
+ }
+}
+
+ All options except for locked are explained in the moveTo() description below. Locked
+ denotes whether or not the view remains locked to the node once the zoom-in animation is finished.
+ Default value is true. The options object is optional in the focus method.
+ |
+
+
+ moveTo(Object options) |
+ none |
+ You can animate or move the camera using the moveTo method. Options are:
+
+{
+ position: {x:Number, y:Number},
+ scale: Number,
+ offset: {x:Number, y:Number}
+ animation: { // -------------------> can be a boolean too!
+ duration: Number
+ easingFunction: String
+ }
+}
+
+ 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
+ {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
+ define the duration (in milliseconds) and easing function manually. Available are:
+ linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic,
+ easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint.
+
+ You will have to define at least a scale or a position. Otherwise, there is nothing to move to.
+ |
+
+
+
+
+ | releaseNode() |
+ none |
+ Programatically release the focussed node. |
+
+
+ The options object supplied to the cluster functions can contain these properties:
+ 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.
+
+ This is a list of all the events in the public API. They are collected here from all individual modules.
+ These events are fired by the interaction module. They are related to user input.
+
+
+
+
+ | click |
+
+
+{
+ nodes: [Array of selected nodeIds],
+ edges: [Array of selected edgeIds],
+ event: [Object] original click event,
+ pointer: {
+ DOM: {x:pointer_x, y:pointer_y},
+ canvas: {x:canvas_x, y:canvas_y}
+ }
+}
+
+ |
+ Fired when the user clicks the mouse or taps on a touchscreen device. |
+
+
+ | doubleClick |
+ same as click. |
+ 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.
+ |
+
+
+ | oncontext |
+ same as click. |
+ 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 getNodeAt to select the node if you want.
+ |
+
+
+ | hold |
+ same as click. |
+ 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.
+ |
+
+
+ | release |
+ same as click. |
+ Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. |
+
+
+ | select |
+ same as click. |
+ Fired when the selection has changed by user action. This means a node or edge has been selected, added
+ to the selection or deselected. All select events are only triggerd on click and hold.
+ |
+
+
+ | selectNode |
+ same as click. |
+ Fired when a node has been selected by the user. |
+
+
+ | selectEdge |
+ same as click. |
+ Fired when a edge has been selected by the user. |
+
+
+ | deselectNode |
+
+{
+ nodes: [Array of selected nodeIds],
+ edges: [Array of selected edgeIds],
+ event: [Object] original click event,
+ pointer: {
+ DOM: {x:pointer_x, y:pointer_y},
+ canvas: {x:canvas_x, y:canvas_y}
+ }
+ },
+ previousSelection: {
+ nodes: [Array of previously selected nodeIds],
+ edges: [Array of previously selected edgeIds]
+ }
+}
+
+ |
+ Fired when a node (or nodes) has (or have) been deselected by the user. The previous selection is the
+ list of nodes and edges that were selected before the last user event.
+ |
+
+
+ | deselectEdge |
+ same as deselectNode. |
+ Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is the
+ list of nodes and edges that were selected before the last user event.
+ |
+
+
+ | dragStart |
+ same as click. |
+ Fired when starting a drag. |
+
+
+ | dragging |
+ same as click. |
+ Fired when dragging node(s) or the view. |
+
+
+ | dragEnd |
+ same as click. |
+ Fired when the drag has finished. |
+
+
+ | zoom |
+ {direction:'+'/'-'} |
+ Fired when the user zooms in or out. The properties tell you which direction the zoom is in. |
+
+
+ | showPopup |
+ id of item corresponding to popup |
+ Fired when the popup is shown. |
+
+
+ | hidePopup |
+ none |
+ Fired when the popup is hidden. |
+
+
+
+ | startStabilizing |
+ none |
+ Fired when stabilization starts. This is also the case when you drag a node and the physics simulation
+ restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'.
+ |
+
+ | stabilizationProgress |
+
+
+{
+ iterations: Number // iterations so far,
+ total: Number // total iterations in options
+}
+
+ |
+ Fired when a multiple of the updateInterval number of iterations is reached. This only
+ occurs in the 'hidden' stabilization.
+ |
+
+
+ | stabilizationIterationsDone |
+ none |
+ Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is
+ stabilized; it could also mean that the amount of iterations defined in the options has been reached.
+ |
+
+ | stabilized |
+
+
+{
+ iterations: Number // iterations it took
+}
+
+ |
+ Fired when the network has stabilized or when the stopSimulation() has been called. The
+ amount of iterations it took could be used to tweak the maximum amount of iterations needed to stabilize
+ the network.
+ |
+
+
+ | resize |
+
+
+{
+ width: Number // the new width of the canvas
+ height: Number // the new height of the canvas
+ oldWidth: Number // the old width of the canvas
+ oldHeight: Number // the old height of the canvas
+}
+
+
+ |
+ Fired when the size of the canvas has been resized, either by a redraw call when the container div has
+ changed in size, a setSize() call with new values or a setOptions() with new width and/or height values.
+ |
+
+
+
+
+ | initRedraw |
+ none |
+ Fired before the redrawing begins. The simulation step has completed at this point. Can be used to move
+ custom elements before starting drawing the new frame.
+ |
+
+ | beforeDrawing |
+ canvas context |
+ Fired after the canvas has been cleared, scaled and translated to the viewing position but before all
+ edges and nodes are drawn. Can be used to draw behind the network.
+ |
+
+ | afterDrawing |
+ canvas context |
+ Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. |
+
+
+
+ | animationFinished |
+ none |
+ Fired when an animation is finished. |
+
+
+
The nodes module has no methods.
- The nodes module emits no events. Click and select events are emitted from the interaction and selection
- modules.
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.
- This is a list of all the events in the public API. They are collected here from all individual modules.
-