ClickSelect
Previous
BrushSelect
Next
CollapseExpand
Loading...
When an element is clicked, it will be highlighted.
This behavior is mainly used for:
createGraph({data: {nodes: [{ id: 'node-1', style: { x: 280, y: 60, fill: '#E4504D', labelText: 'degree: 0' } },{ id: 'node-2-1', style: { x: 330, y: 140, fill: '#FFC40C', labelText: 'degree: 1' } },{ id: 'node-2-2', style: { x: 230, y: 140, fill: '#FFC40C', labelText: 'degree: 1' } },{ id: 'node-3-1', style: { x: 380, y: 220, fill: '#0f0', labelText: 'degree: 2' } },{ id: 'node-3-2', style: { x: 180, y: 220, fill: '#0f0', labelText: 'degree: 2' } },{id: 'degree引导',style: {x: 525,y: 110,fill: null,labelText: '这里可以修改degree ->',labelFontWeight: 700,labelFontSize: 10,},},],edges: [{ source: 'node-1', target: 'node-2-1' },{ source: 'node-1', target: 'node-2-2' },{ source: 'node-2-1', target: 'node-3-1' },{ source: 'node-2-2', target: 'node-3-2' },],},node: {style: { label: true, labelFill: '#666', labelFontSize: 14, labelPlacement: 'bottom' },state: {custom: { fill: '#ffa940' },},},edge: {stroke: '#8b9baf',state: {custom: { stroke: '#ffa940' },},},behaviors: [{type: 'click-select',key: 'click-select',},],plugins: [{ type: 'grid-line', size: 30 }],animation: true,},{ width: 600, height: 300 },(gui, graph) => {const options = {key: 'click-select',type: 'click-select',animation: true,enable: true,multiple: false,trigger: 'shift+click',state: 'selected',unselectedState: undefined,degree: 0,};const optionFolder = gui.addFolder('Click Select Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'animation');optionFolder.add(options, 'enable');optionFolder.add(options, 'degree', 0, 2, 1);optionFolder.add(options, 'state', ['active', 'selected', 'custom']);optionFolder.add(options, 'unselectedState', [undefined, 'inactive']);const trigger = optionFolder.add(options, 'trigger', {'shift+click': ['shift'],'meta+click': ['Meta'],}).hide();optionFolder.add(options, 'multiple').onChange((v) => trigger.show(v));optionFolder.onChange(({ property, value }) => {graph.updateBehavior({key: 'click-select',[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: ['click-select'],});
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: 'click-select',key: 'click-select-1',degree: 2, // Selection spread rangestate: 'active', // Selected stateneighborState: 'neighborActive', // Neighbor node attached stateunselectedState: 'inactive', // Unselected node state},],});
| Option | Description | Type | Default | Required |
|---|---|---|---|---|
| type | Behavior type name. This behavior is built-in, and you can use it with type: 'click-select'. | click-select | string | click-select | ✓ |
| animation | Whether to enable animation effects when switching element states | boolean | true | |
| degree | Controls the highlight spread range, example | number | (event:Event) => number | 0 | |
| enable | Whether to enable the click element function, supports dynamic control through functions, example | boolean | ((event: Event) => boolean) | true | |
| multiple | Whether to allow multiple selections | boolean | false | |
| state | The state applied when an element is selected | string | selected | active| inactive| disabled| highlight | selected | |
| neighborState | The state applied to elements with n-degree relationships when an element is selected. The value of n is controlled by the degree attribute, for example, degree 1 means directly adjacent elements, example | string | selected | active| inactive| disabled| highlight | selected | |
| unselectedState | The state applied to all other elements except the selected element and its affected neighbor elements when an element is selected, example | string | selected | active| inactive| disabled| highlight | ||
| onClick | Callback when an element is clicked | (event: Event) => void | ||
| trigger | Press this shortcut key in combination with a mouse click to perform multi-selection, key reference: MDN Key Values | string[] | (Control | Shift| Alt | ......)[] | ['shift'] |
Controls the highlight spread range
0 means only the current node is selected, 1 means the current node and its directly adjacent nodes and edges are selected, and so on.0 means only the current edge is selected, 1 means the current edge and its directly adjacent nodes are selected, and so on.In the following example, when
degree: 0only the red point is highlighted; Whendegree: 1the red and orange points are highlighted.
createGraph({data: {nodes: [{ id: 'node-1', style: { x: 280, y: 60, fill: '#E4504D', labelText: 'degree: 0' } },{ id: 'node-2-1', style: { x: 330, y: 140, fill: '#FFC40C', labelText: 'degree: 1' } },{ id: 'node-2-2', style: { x: 230, y: 140, fill: '#FFC40C', labelText: 'degree: 1' } },{ id: 'node-3-1', style: { x: 380, y: 220, fill: '#0f0', labelText: 'degree: 2' } },{ id: 'node-3-2', style: { x: 180, y: 220, fill: '#0f0', labelText: 'degree: 2' } },{id: 'degree引导',style: {x: 525,y: 110,fill: null,labelText: '这里可以修改degree ->',labelFontWeight: 700,labelFontSize: 10,},},],edges: [{ source: 'node-1', target: 'node-2-1' },{ source: 'node-1', target: 'node-2-2' },{ source: 'node-2-1', target: 'node-3-1' },{ source: 'node-2-2', target: 'node-3-2' },],},node: {style: { label: true, labelFill: '#666', labelFontSize: 14, labelPlacement: 'bottom' },state: {custom: { fill: '#ffa940' },},},edge: {stroke: '#8b9baf',state: {custom: { stroke: '#ffa940' },},},behaviors: [{type: 'click-select',key: 'click-select',},],plugins: [{ type: 'grid-line', size: 30 }],animation: true,},{ width: 600, height: 300 },(gui, graph) => {const options = {key: 'click-select',type: 'click-select',animation: true,enable: true,multiple: false,trigger: 'shift+click',state: 'selected',unselectedState: undefined,degree: 0,};const optionFolder = gui.addFolder('Click Select Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'animation');optionFolder.add(options, 'enable');optionFolder.add(options, 'degree', 0, 2, 1);optionFolder.add(options, 'state', ['active', 'selected', 'custom']);optionFolder.add(options, 'unselectedState', [undefined, 'inactive']);const trigger = optionFolder.add(options, 'trigger', {'shift+click': ['shift'],'meta+click': ['Meta'],}).hide();optionFolder.add(options, 'multiple').onChange((v) => trigger.show(v));optionFolder.onChange(({ property, value }) => {graph.updateBehavior({key: 'click-select',[property]: value,});graph.render();});},);
Whether to enable the click element function
It can be dynamically controlled through functions, for example, only enabled when a node is selected.
{//⚠️ Note, you need to set both the node and the canvas, otherwise the user will not listen to the event when clicking the canvasenable: (event) => ['node', 'canvas'].includes(event.targetType);}
createGraph({data: {nodes: [{ id: 'node1', style: { x: 100, y: 60 } },{ id: 'node2', style: { x: 200, y: 60 } },{ id: 'node3', style: { x: 300, y: 60 } },],edges: [{ source: 'node1', target: 'node2' },{ source: 'node2', target: 'node3' },],},node: {style: {fill: '#E4504D',},state: {active: {fill: '#0f0',},neighborActive: {fill: '#FFC40C',},},},behaviors: [{type: 'click-select',degree: 1,state: 'active',neighborState: 'neighborActive',enable: (event) => ['node', 'canvas'].includes(event.targetType),},],},{ width: 400, height: 200 },);
Similarly, if you only want edges to be selected:
{enable: (event) => ['edge', 'canvas'].includes(event.targetType);}
The state applied to elements with n-degree relationships when an element is selected. The value of n is controlled by the degree attribute, for example, degree 1 means directly adjacent elements
const graph = new Graph({behaviors: [{type: 'click-select',degree: 1,// State attached to the directly clicked nodestate: 'active',// State attached to adjacent nodesneighborState: 'neighborActive',},],});
createGraph({layout: {type: 'grid',},data: {nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],edges: [{ source: 'node1', target: 'node2' },{ source: 'node2', target: 'node3' },{ source: 'node3', target: 'node4' },{ source: 'node4', target: 'node5' },],},node: {style: {fill: '#E4504D',},state: {active: {fill: '#0f0',},neighborActive: {fill: '#FFC40C',halo: true,},},},behaviors: [{type: 'click-select',degree: 1,state: 'active',neighborState: 'neighborActive',},],},{ width: 400, height: 200 },);
When an element is selected, the state applied to all other elements except the selected element and the spread neighbor elements.
Built-in states: selected active inactive disabled highlight
const graph = new Graph({behaviors: [{type: 'click-select',degree: 1,unselectedState: 'inactive',},],});
createGraph({layout: {type: 'grid',},data: {nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],edges: [{ source: 'node1', target: 'node2' },{ source: 'node2', target: 'node3' },{ source: 'node3', target: 'node4' },{ source: 'node4', target: 'node5' },],},node: {style: {fill: '#E4504D',},state: {active: {fill: '#0f0',},neighborActive: {fill: '#FFC40C',},},},behaviors: [{type: 'click-select',degree: 1,state: 'active',neighborState: 'neighborActive',unselectedState: 'inactive',},],},{ width: 400, height: 200 },);
Clicking a node will switch from default state to active
Adjacent nodes will switch from default state to neighborActive
const graph = new Graph({node: {style: {fill: '#E4504D',},state: {// Selected node stateactive: {fill: '#0f0',},// Adjacent node stateneighborActive: {fill: '#FFC40C',},},},behaviors: [{type: 'click-select',degree: 1,state: 'active',// State attached to adjacent nodesneighborState: 'neighborActive',// Unselected node stateunselectedState: 'inactive',},],});
createGraph({layout: {type: 'grid',},data: {nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],edges: [{ source: 'node1', target: 'node2' },{ source: 'node2', target: 'node3' },{ source: 'node3', target: 'node4' },{ source: 'node4', target: 'node5' },],},node: {style: {fill: '#E4504D',},state: {active: {fill: '#0f0',},neighborActive: {fill: '#FFC40C',},},},behaviors: [{type: 'click-select',degree: 1,state: 'active',neighborState: 'neighborActive',unselectedState: 'inactive',},],},{ width: 400, height: 200 },);