Overview

Behavior refers to a series of operational behaviors between the user and the canvas or elements, such as dragging, scaling, panning, and selecting. Interactions help users to more intuitively obtain information from the graph.

G6 provides a rich set of interactive features, and users can choose the appropriate interactive behaviors according to their needs, including:

• Brush Select: Box Selection
• Click Select: Single Click Selection
• Collapse Expand: Expand and Collapse
• Create Edge: Create an Edge
• Drag Canvas: Drag the Canvas
• Drag Element: Drag an Element
• Focus Element: Focus on an Element
• Hover Element: Hover Over an Element
• Lasso Select: Lasso Selection
• Zoom Canvas: Zoom the Canvas

Register Behavior

You can directly use the built-in behaviors. If you want to use other behaviors, you need to register them first:

import { register, ExtensionCategory } from '@antv/g6';
import { CustomBehavior } from 'package-name/or/path-to-your-custom-behavior';

register(ExtensionCategory.BEHAVIOR, 'custom-behavior', CustomBehavior);

Configure Behavior

You can directly configure the names of behavior types in the behaviors array, for example:

{
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'click-select'],
}

It also supports passing configuration parameters in the form of an object, for example:

{
  behaviors: [
    {
      type: 'zoom-canvas',
      sensitivity: 2,
    },
  ],
}

Different behaviors support different configuration parameters. For details, please refer to behaviors.

Update Behavior

If you need to update behaviors after initialization, for example, to temporarily disable a certain behavior, you can use the updateBehavior method:

// Disable the `zoom-canvas` behavior.
graph.updateBehavior({
  key: 'zoom-canvas',
  enable: false,
});

You can also use the setBehaviors method to add, update, or remove current behavior behaviors at any time:

// Add the `lasso-select` behavior
graph.setBehaviors((behaviors) => [...behaviors, 'lasso-select']);

// Update the `zoom-canvas` behavior (requires configure the behavior as an `object` with a `key` during initialization)
graph.setBehaviors((behaviors) =>
  behaviors.map((behavior) => {
    if (behavior.key === 'zoom-canvas') {
      return { ...behavior, sensitivity: 2 };
    }
    return behavior;
  }),
);

// Remove the `click-select` behavior
graph.setBehaviors((behaviors) => behaviors.filter((behavior) => behavior !== 'click-select'));

Custom Behavior

If the built-in behaviors do not meet your requirements, you can create custom behaviors. For details, please refer to Custom Behavior.