Add/Remove Behaviors

2 min read

graph.addBehaviors(behaviors, modes)

Add interaction behaviors to a mode or multiple modes.

Parameters

NameTypeRequiredDescription
behaviorsstring / ArraytrueThe name(s) of behavior(s) to be added.
modesstring / ArraytrueThe name(s) of mode(s)

Usage

// Add single behavior 'click-select' to a single mode 'default'
graph.addBehaviors('click-select', 'default');

// Add multiple behaviors to single mode 'default'
graph.addBehaviors(['brush-select', 'click-select'], 'default');

// Add single behavior 'brush-select' to multiple modes
graph.addBehaviors('brush-select', ['default', 'select']);

// Add multiple behaviors to multiple modes
graph.addBehaviors(['brush-select', 'click-select'], ['default', 'select']);

graph.removeBehaviors(behaviors, modes)

Remove behavior(s) from mode(s).

Parameters

NameTypeRequiredDescription
behaviorsstring / ArraytrueThe name(s) of behavior(s) to be removed.
modesstring / ArraytrueThe name(s) of mode(s).

Usage

// remove single behavior 'click-select' from single mode 'default'
graph.removeBehaviors('click-select', 'default');

// remove multiple behaviors from single mode 'default'
graph.removeBehaviors(['brush-select', 'click-select'], 'default');

// remove single behavior 'brush-select' from multiple modes
graph.removeBehaviors('brush-select', ['default', 'select']);

// remove multiple behaviors from multiple modes
graph.removeBehaviors(['brush-select', 'click-select'], ['default', 'select']);

graph.updateBehavior(behavior, mode)

Update the configurations for a behavior from mode.

Parameters

NameTypeRequiredDescription
behaviorstringtrueThe type name of the behavior need to be updated
newCfgobjecttrueThe new configurations
modestringfalseThe mode name of the mode where the behavior need to be updated. 'default' by default

Usage

const graph = new Graph({
  ... // Other graph configurations
  modes: {
    default: ['zoom-canvas', 'drag-canvas'],
    select: ['click-select']
  }
});

graph.data(data);
graph.render();

// update the behavior 'zoom-canvas' from mode 'default'
graph.updateBehavior('zoom-canvas', { sensitivity: 1.5, enableOptimize: true}, 'default');

// update the behavior 'click-select' from mode 'select'
graph.updateBehavior('click-select', { trigger: 'ctrl' }, 'select');