Network

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!

Modules

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.


Custom locales

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.