Network - interaction

Used for all user interaction with the network. Handles mouse and touch events as well as the navigation buttons and the popups.

Options

The options for the interaction module have to be contained in an object titled 'interaction'.

Click on the full options or shorthand options to show how these options are supposed to be used.

// these are all options in full.
var options = {
  interaction:{
    dragNodes:true,
    dragView: true,
    hideEdgesOnDrag: false,
    hideEdgesOnZoom: false,
    hideNodesOnDrag: false,
    hover: false,
    hoverConnectedEdges: true,
    keyboard: {
      enabled: false,
      speed: {x: 10, y: 10, zoom: 0.02},
      bindToWindow: true,
      autoFocus: true,
    },
    multiselect: false,
    navigationButtons: false,
    selectable: true,
    selectConnectedEdges: true,
    tooltipDelay: 300,
    zoomSpeed: 1,
    zoomView: true
  }
}

network.setOptions(options);

// only the options that have shorthand notations are shown.
var options = {
  interaction:{
    keyboard: false
  }
}

network.setOptions(options);

This is a list of all the methods in the public API. They are collected here from all individual modules.

Name	Type	Default	Description
dragNodes	Boolean	`true`	When true, the nodes that are not fixed can be dragged by the user.
dragView	Boolean	`true`	When true, the view can be dragged around by the user.
hideEdgesOnDrag	Boolean	`false`	When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.
hideEdgesOnZoom	Boolean	`false`	When true, the edges are not drawn when zooming the view. This can greatly speed up responsiveness on zooming, improving user experience.
hideNodesOnDrag	Boolean	`false`	When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.
hover	Boolean	`false`	When true, the nodes use their hover colors when the mouse moves over them.
hoverConnectedEdges	Boolean	`true`	When true, on hovering over a node, it's connecting edges are highlighted.
keyboard	Object or Boolean	`Object`	When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.
keyboard.enabled	Boolean	`false`	Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.
keyboard.speed.x	Number	`1`	The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.
keyboard.speed.y	Number	`1`	The speed at which the view moves in the y direction on pressing a key or pressing a navigation button.
keyboard.speed.zoom	Number	`0.02`	The speed at which the view zooms in or out pressing a key or pressing a navigation button.
keyboard.bindToWindow	Boolean	`true`	When binding the keyboard shortcuts to the window, they will work regardless of which DOM object has the focus. If you have multiple networks on your page, you could set this to false, making sure the keyboard shortcuts only work on the network that has the focus.
keyboard.autoFocus	Boolean	`true`	When `keyboard.bindToWindow=false` this option allows you to skip auto focusing the network on hover.
multiselect	Boolean	`false`	When true, a longheld click (or touch) as well as a control-click will add to the selection.
navigationButtons	Boolean	`false`	When true, navigation buttons are drawn on the network canvas. These are HTML buttons and can be completely customized using CSS.
selectable	Boolean	`true`	When true, the nodes and edges can be selected by the user.
selectConnectedEdges	Boolean	`true`	When true, on selecting a node, its connecting edges are highlighted.
tooltipDelay	Number	`300`	When nodes or edges have a defined `'title'` field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown.
zoomSpeed	Number	`1`	How fast/rough or slow/precise zooming is.
zoomView	Boolean	`true`	When true, the user can zoom in.

Third party docs: