HoverActivate
Previous
FocusElement
Next
LassoSelect
Loading...
HoverActivate is a built-in behavior in G6 used to implement the hover activation effect on elements. When the mouse hovers over nodes or edges, it automatically triggers visual feedback such as highlighting and displaying. This behavior is an important means of enhancing data exploration in graph visualization, helping users quickly focus on target elements and obtain related information.
This behavior is mainly used for:
createGraph({data: {nodes: [{ id: 'node0', size: 50, label: '0', style: { x: 326, y: 268 } },{ id: 'node1', size: 30, label: '1', style: { x: 280, y: 384 } },{ id: 'node2', size: 30, label: '2', style: { x: 234, y: 167 } },{ id: 'node3', size: 30, label: '3', style: { x: 391, y: 368 } },{ id: 'node4', size: 30, label: '4', style: { x: 444, y: 209 } },{ id: 'node5', size: 30, label: '5', style: { x: 378, y: 157 } },{ id: 'node6', size: 15, label: '6', style: { x: 229, y: 400 } },{ id: 'node7', size: 15, label: '7', style: { x: 281, y: 440 } },{ id: 'node8', size: 15, label: '8', style: { x: 188, y: 119 } },{ id: 'node9', size: 15, label: '9', style: { x: 287, y: 157 } },{ id: 'node10', size: 15, label: '10', style: { x: 185, y: 200 } },{ id: 'node11', size: 15, label: '11', style: { x: 238, y: 110 } },{ id: 'node12', size: 15, label: '12', style: { x: 239, y: 221 } },{ id: 'node13', size: 15, label: '13', style: { x: 176, y: 160 } },{ id: 'node14', size: 15, label: '14', style: { x: 389, y: 423 } },{ id: 'node15', size: 15, label: '15', style: { x: 441, y: 341 } },{ id: 'node16', size: 15, label: '16', style: { x: 442, y: 398 } },],edges: [{ source: 'node0', target: 'node1', label: '0-1' },{ source: 'node0', target: 'node2', label: '0-2' },{ source: 'node0', target: 'node3', label: '0-3' },{ source: 'node0', target: 'node4', label: '0-4' },{ source: 'node0', target: 'node5', label: '0-5' },{ source: 'node1', target: 'node6', label: '1-6' },{ source: 'node1', target: 'node7', label: '1-7' },{ source: 'node2', target: 'node8', label: '2-8' },{ source: 'node2', target: 'node9', label: '2-9' },{ source: 'node2', target: 'node10', label: '2-10' },{ source: 'node2', target: 'node11', label: '2-11' },{ source: 'node2', target: 'node12', label: '2-12' },{ source: 'node2', target: 'node13', label: '2-13' },{ source: 'node3', target: 'node14', label: '3-14' },{ source: 'node3', target: 'node15', label: '3-15' },{ source: 'node3', target: 'node16', label: '3-16' },],},behaviors: ['zoom-canvas', 'drag-canvas', { key: 'hover-activate', type: 'hover-activate' }],autoFit: 'center',},{ width: 600, height: 300 },(gui, graph) => {const options = {key: 'hover-activate',type: 'hover-activate',animation: true,enable: true,degree: 1,direction: 'both',};const optionFolder = gui.addFolder('Hover Activate Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'animation');optionFolder.add(options, 'enable');optionFolder.add(options, 'degree', 0, 10, 1);optionFolder.add(options, 'direction', {both: ['both'],in: ['in'],out: ['out'],});optionFolder.onChange(({ property, value }) => {graph.updateBehavior({key: 'hover-activate',[property]: value,});graph.render();});},);
Add this behavior in the graph configuration:
1. Quick Configuration (Static)
Declare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:
const graph = new Graph({// Other configurations...behaviors: ['hover-activate'],});
2. Object Configuration (Recommended)
Configure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:
const graph = new Graph({// Other configurations...behaviors: [{type: 'hover-activate',key: 'hover-activate-1', // Specify an identifier for the behavior for dynamic updates},],});
| Option | Description | Type | Default | Required |
|---|---|---|---|---|
| type | Behavior type name | string | hover-activate | ✓ |
| animation | Whether to enable animation | boolean | true | |
| enable | Whether to enable hover feature | boolean | ((event: IPointerEvent) => boolean) | true | |
| degree | Degree of relationship to activate elements | number | ((event: IPointerEvent) => number); | 0 | |
| direction | Specify edge direction | both | in | out | both | |
| state | State of activated elements | string | active | |
| inactiveState | State of inactive elements | string | - | |
| onHover | Callback when element is hovered | (event: IPointerEvent) => void | - | |
| onHoverEnd | Callback when hover ends | (event: IPointerEvent) => void | - |
enable is used to control whether to enable hover highlighting of elements, and can receive a function for dynamic control
For example: Enable hover highlighting only for nodes
const graph = new Graph({// Other configurations...behaviors: [{type: 'hover-activate',enable: (e) => {if (e.targetType === 'node') {return true;}return false;},},],});
const graph = new Graph({// Other configurations...behaviors: ['hover-activate'],});
const graph = new Graph({// Other configurations...behaviors: [{type: 'hover-activate',enable: (e) => {if (e.targetType === 'node') {return true;}return false;},},],});
const graph = new Graph({// Other configurations...behaviors: [{type: 'hover-activate',degree: 1,direction: 'out',enable: (e) => {if (e.targetType === 'node') {return true;}return false;},},],});