Network

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);

The individual options are explained below. The ones referring to modules are explained in the corresponding 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.

Methods

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.

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;
}

// All nodes in the network.
network.getPositions();
>   {
        a123: { x: 5, y: 12 },
        b456: { x: 3, y: 4 },
        c789: { x: 7, y: 10 }
    }


// Specific nodes.
network.getPositions(['a123', 'b456']);
>   {
        a123: { x: 5, y: 12 },
        b456: { x: 3, y: 4 },
    }


// A single node.
network.getPositions('a123');
>   {
        a123: { x: 5, y: 12 }
    }
                    
                    

network.getPosition('a123');
>   { x: 5, y: 12 }
                    

{
  top: Number,
  left: Number,
  right: Number,
  bottom: Number
}

{
  nodes: [Array of selected nodeIds],
  edges: [Array of selected edgeIds]
}

{
  nodes: [Array of nodeIds],
  edges: [Array of edgeIds]
}

{
  unselectAll: Boolean,
  highlightEdges: Boolean
}

{
  nodes?: (string | number)[],
  minZoomLevel?: number,
  maxZoomLevel?: number,
  animation?: boolean | {
    duration?: number
    easingFunction?: string
  }
}

{
  scale: Number,
  offset: {x:Number, y:Number}
  locked: boolean
  animation: { // -------------------> can be a boolean too!
    duration: Number
    easingFunction: String
  }
}

{
  position: {x:Number, y:Number},
  scale: Number,
  offset: {x:Number, y:Number}
  animation: { // -------------------> can be a boolean too!
    duration: Number
    easingFunction: String
  }
}

Cluster methods options object

The options object supplied to the cluster functions can contain these properties:

var nodes = [
  {id: 4, label: 'Node 4'},
  {id: 5, label: 'Node 5'},
  {id: 6, label: 'Node 6', cid:1},
  {id: 7, label: 'Node 7', cid:1}
]

var options = {
  joinCondition:function(nodeOptions) {
    return nodeOptions.cid === 1;
  }
}

network.clustering.cluster(options);

var options = {
  processProperties: function (clusterOptions,
      childNodes, childEdges) {
    var totalMass = 0;
    var totalValue = 0;
    for (var i = 0; i < childNodes.length; i++) {
      totalMass += childNodes[i].mass;
      totalValue = childNodes[i].value
        ? totalValue + childNodes[i].value
        : totalValue;
    }
    clusterOptions.mass = totalMass;
    if (totalValue > 0) {
      clusterOptions.value = totalValue;
    }
    return clusterOptions;
  },
}

    clusterNodeProperties: {
        allowSingleNodeCluster: true
    }

Events

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.

{
  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}
  }
}

{
...
  items: [Array of click items],
}

  {nodeId:NodeId}            // node with given id clicked on
  {nodeId:NodeId labelId:0}  // label of node with given id clicked on
  {edgeId:EdgeId}            // edge with given id clicked on
  {edge:EdgeId, labelId:0}   // label of edge with given id clicked on

{
  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]
  }
}

{
    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}
    },    
    controlEdge: {from:from_node_id, to:to_node_id}
}

{
  direction: '+'/'-',
  scale: Number,
  pointer: {x:pointer_x, y:pointer_y}
}

{
  iterations: Number // iterations so far,
  total: Number      // total iterations in options
}

{
  iterations: Number // iterations it took
}

{
  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
}

Importing data

Network contains conversion utilities to import data from Gephi and graphs in the DOT language.

Import data from Gephi

Network can import data straight from an exported json file from gephi. You can get the JSON exporter here: https://gephi.org/plugins/#/plugin/jsonexporter-plugin. An example exists showing how to get a JSON file into Vis:

Example usage:

// load the JSON file containing the Gephi network.
var gephiJSON = loadJSON("./datasources/WorldCup2014.json"); // code in importing_from_gephi.

// you can customize the result like with these options. These are explained below.
// These are the default options.
var parserOptions = {
  edges: {
    inheritColor: false
  },
  nodes: {
    fixed: true,
    parseColor: false
  }
}

// parse the gephi file to receive an object
// containing nodes and edges in vis format.
var parsed = vis.parseGephiNetwork(gephiJSON, parserOptions);

// provide data in the normal fashion
var data = {
  nodes: parsed.nodes,
  edges: parsed.edges
};

// create a network
var network = new vis.Network(container, data);

Gephi parser options

Import data in DOT language

Network supports data in the DOT language. To use data in the DOT language, you can use the vis.parseDOTNetwork converter function to transform the DOT language string into a Vis Network compatible nodes, edges and options. You can alter or extend the returned nodes, edges and options if you like.

Example usage:

// provide data in the DOT language
var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var parsedData = vis.parseDOTNetwork(DOTstring);

var data = {
  nodes: parsedData.nodes,
  edges: parsedData.edges
}

var options = parsedData.options;

// you can extend the options like a normal JSON variable:
options.nodes = {
  color: 'red'
}

// create a network
var network = new vis.Network(container, data, options);