What is Behavior

Behavior refers to the interactive operations between users and chart elements, such as dragging the canvas, selecting nodes, zooming the view, etc. Good behavior design allows users to explore and understand graph data more intuitively. Proper configuration of behaviors is a key step in building efficient and usable charts.

Changes in G6 5.0 Behavior System

G6 5.0 removed the concept of "Behavior Mode" (Mode), and directly lists the required behavior behaviors in behaviors, simplifying the configuration. This makes behavior configuration more intuitive and easier to get started with.

import { Graph } from '@antv/g6';

const graph = new Graph({
  behaviors: ['drag-canvas', 'zoom-canvas', 'click-select'],
});

Built-in Behaviors

G6 provides a variety of built-in behaviors that are ready to use without registration:

For detailed configuration of each behavior, refer to the Built-in Behavior Documentation.

Custom Behaviors

When built-in behaviors cannot meet the requirements, G6 provides powerful customization capabilities:

• Extend by inheriting built-in behaviors
• Create entirely new behavior behaviors

Unlike built-in behaviors, custom behaviors need to be registered before use. For detailed tutorials, refer to the Custom Behavior documentation.

Configuration and Usage

Basic Configuration

The simplest way is to directly specify the required behaviors through the behaviors array when initializing the graph instance:

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

Configure Behavior Parameters

For behaviors that require custom parameters, you can configure properties using the object form:

const graph = new Graph({
  // Other configurations...
  behaviors: [
    'drag-canvas',
    {
      type: 'zoom-canvas',
      sensitivity: 1.5, // Configure sensitivity
      key: 'zoom-behavior', // Specify a key for the behavior for subsequent updates
    },
  ],
});

Dynamically Update Behaviors

G6 supports dynamically managing behavior behaviors during the runtime of the graph instance to meet complex behavior needs:

You can adjust behaviors using the setBehaviors method:

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

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

You can update the configuration of behaviors using the updateBehavior method:

// Update a single behavior
graph.updateBehavior({
  key: 'zoom-behavior',
  sensitivity: 2,
  enable: false, // Disable the behavior
});

Uninstall Behaviors

You can also uninstall behaviors using the setBehaviors method by setting the behavior configuration list to empty:

graph.setBehaviors([]);

For more behavior-related APIs, refer to the Behavior API Documentation.

Behavior and Events

Behaviors are essentially implemented through event listening and response. Although built-in behaviors have encapsulated common behavior behaviors, you can also directly implement custom behavior logic through the event API.

Event Listening Example

// Use event constants (recommended)
import { NodeEvent, EdgeEvent } from '@antv/g6';

// Listen for node clicks
graph.on(NodeEvent.CLICK, (evt) => {
  const { target } = evt;
  graph.setElementState(target.id, 'selected');
});

// Listen for edge hover
graph.on(EdgeEvent.POINTER_OVER, (evt) => {
  const { target } = evt;
  graph.setElementState(target.id, 'highlight');
});

The event system is the foundation for implementing behaviors. Mastering the event API is crucial for understanding and extending behavior behaviors. For more event-related information, refer to the Event Documentation.