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.


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

nametypedefaultdescription
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.
zoomView Boolean true When true, the user can zoom in.
hoverEnabled Boolean false When true, the nodes use their hover colors when the mouse moves over them.
navigationButtons Boolean false When true, navigation buttons are drawn on the network canvas. These are HTML buttons and can be completely customized using CSS.
tooltipDelay Number Object 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.
keyboard Object or Boolean Object When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.

Methods

The interaction module has no methods.

Events

These events are fired by the interaction module. They are related to user input.

namepropertiesdescription
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.
deselectEdgesame 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 popupFired when the popup is shown.
hidePopup none Fired when the popup is hidden.