When the mouse hovers over an element, you can activate the state of the element, such as highlighting nodes or edges.

Options

key

string

Behavior key, that is, the unique identifier

Used to identify the behavior for further operations

// Update behavior options
graph.updateBehavior({key: 'key', ...});

Required type

string

Behavior type

animation

boolean Default: true

Whether to enable animation

degree

number | ((event: Event) => number) Default: 0

N-degree relationship of the hovered element

• default to 0, which means only the current node is activated

• 1 means the current node and its directly adjacent nodes and edges are activated, etc

direction

'in' | 'out' | 'both' Default: 'both'

Specify the direction of the edge

• 'both': Activate all relationships of the current node

• 'in': Activate the incoming edges and nodes of the current node

• 'out': Activate the outgoing edges and nodes of the current node

enable

boolean | ((event: Event) => boolean) Default: true

Whether to enable hover element function

inactiveState

string

Inactive element state, default to no change

onHover

(event: Event) => void

Callback when the element is hovered

onHoverEnd

(event: Event) => void

Callback when the hover ends

state

string Default: 'active'

Active element state, default toactive

API

HoverActivate.destroy()

destroy(): void;

HoverActivate.getActiveIds(event)

protected getActiveIds(event: IPointerEvent<Element>): string[];