Each interaction device realizes one function. A group of interaction devices coordinates for one work, forming an interaction mode, such as default interaction mode which includes the translate interaction device, node drag interaction device, spot selection interaction device, text hint interaction device and so on. We can combine different interaction devices for satisfying the demand of interaction.

Following several interaction modes are supplied in default: 

  • Consts.INTERACTION_MODE_DEFAULT - default interaction mode 
  • Consts.INTERACTION_MODE_SELECTION - frame selection interaction mode 
  • Consts.INTERACTION_MODE_ZOOMIN - zoom in interaction mode 
  • Consts.INTERACTION_MODE_ZOOMOUT - zoom out interaction mode 

Switch interaction mode

 The current interaction mode can be switched by the property of #interactionMode


 Switched to frame selection interaction mode 

graph.interactionMode = Q.Consts.INTERACTION_MODE_SELECTION;

Custom interaction mode

The interaction mode can also be completely customized. There are two steps: firstly register a new name of interaction mode, such as "VIEW_MODE", and then set this name to the component of network graph

For example, registers a new interaction mode, and applies the translation, text hint and custom combination of interaction device 

Q.Defaults.registerInteractions("CUSTOM-MODE", [Q.PanInteraction, Q.TooltipInteraction, {
    onclick: function(evt, graph){
graph.interactionMode = "CUSTOM-MODE";

Other related properties and methods of interaction

  • #enableTooltip :Boolean - whether the prompt text is displayed
  • #enableWheelZoom :Boolean - whether the mouse wheel will be used for zooming