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.
+ +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.
+ + Show the getting started! +
+ Creating a vis network is easy. It requires you to
+ include the vis.js and css files which you can get here. 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.
+
+ 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:
+<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>
+
+ The result of the code above will be the basic example which is shown here.
+ +| configure | +Generates an interactive option editor with filtering. | +
| edges | +Handles the creation and deletion of edges and contains the global edge options and styles. | +
| groups | +Contains the groups and some options on how to handle nodes with non-existing groups. | +
| interaction | +Used for all user interaction with the network. Handles mouse and touch events and selection as well as + the navigation buttons and the popups. + | +
| layout | +Governs the initial and hierarchical positioning. | +
| manipulation | +Supplies an API and optional GUI to alter the data in the network. | +
| nodes | +Handles the creation and deletion of nodes and contains the global node options and styles. | +
| physics | +Does all the simulation moving the nodes and edges to their final positions, also governs + stabilization. + | +
+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);
+
+ The individual options are explained below. The ones referring to modules are explained in the corresponding + module.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| autoResize | +Boolean | +true |
+ 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(). + | +
| width | +String | +'100%' |
+ the width of the canvas. Can be in percentages or pixels (ie. '400px'). |
+
| height | +String | +'100%' |
+ the height of the canvas. Can be in percentages or pixels (ie. '400px'). |
+
| locale | +String | +'en' |
+ Select the locale. By default, the language is English. If you want to use another language, you + will + need to define your own locale and refer to it here. + | +
| locales | +Object | +defaultLocales | +Locales object. By default only 'en' and 'nl' are supported. Take a look
+ at
+ the locales
+ section below for more explaination on how to customize this.
+ |
+
| clickToUse | +Boolean | +false | +Locales object. By default only 'en' and 'nl' are supported. Take a look
+ at
+ the locales
+ section below for more explaination on how to customize this.
+ |
+
| configure | +Object | +Object | +All options in this object are explained in the configure module. + | +
| edges | +Object | +Object | +All options in this object are explained in the edges module. + | +
| nodes | +Object | +Object | +All options in this object are explained in the nodes module. + | +
| groups | +Object | +Object | +All options in this object are explained in the groups module. + | +
| layout | +Object | +Object | +All options in this object are explained in the layout module. + | +
| interaction | +Object | +Object | +All options in this object are explained in the interaction module. + | +
| manipulation | +Object | +Object | +All options in this object are explained in the manipulation module. + | +
| physics | +Object | +Object | +All options in this object are explained in the physics module. + | +
The locales object has the following format:
+
+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.'
+ }
+}
+ 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.
+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.
+| Name | +Properties | +Description | +
|---|---|---|
| Events triggered by human interaction, selection, dragging etc. | +||
| click | ++ Object + | +Fired when the user clicks the mouse or taps on a touchscreen device. Passes an object with properties structured as:
+
+ {
+ 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}
+ }
+}
+
+ |
+
| 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 the method 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 triggered 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 | +Object + | +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. Passes an object with properties structured as:
+{
+ 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]
+ }
+}
+
+ |
+
| 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. | +
| hoverNode | +{node: nodeId} |
+ Fired interaction:{hover:true} and the mouse hovers over a node. | +
| blurNode | +{node: nodeId} |
+ Fired interaction:{hover:true} and the mouse moved away from a node it was hovering over before. | +
| hoverEdge | +{edge: edgeId} |
+ Fired interaction:{hover:true} and the mouse hovers over an edge. | +
| blurEdge | +{edge: edgeId} |
+ Fired interaction:{hover:true} and the mouse moved away from an edge it was hovering over before. | +
| zoom | +{direction:'+'/'-', scale: Number} |
+ Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale(). | +
| showPopup | +id of item corresponding to popup |
+ Fired when the popup (tooltip) is shown. | +
| hidePopup | +none | +Fired when the popup (tooltip) is hidden. | +
| Events triggered the physics simulation. Can be used to trigger GUI updates. | +||
| 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 | +Object | +Fired when a multiple of the updateInterval number of iterations is reached. This only occurs in the 'hidden' stabilization. Passes an object with properties structured as:
+
+ {
+ iterations: Number // iterations so far,
+ total: Number // total iterations in options
+}
+ |
+
| 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 | +Object | +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. Passes an object with properties structured as:
+{
+ iterations: Number // iterations it took
+}
+
+ |
+
| Event triggered by the canvas. | +||
| resize | +Object | +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. Passes an object with properties structured as:
+
+
+{
+ 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
+}
+
+ |
+
+
| Events triggered by the rendering module. Can be used to draw custom elements on the + canvas. + | +||
| 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. + | +
| Event triggered by the view module. | +||
| animationFinished | +none | +Fired when an animation is finished. | +