Usage guidesInteraction
Brush select
Drag a rectangle to select nodes whose centers fall inside it.
Drag a rectangle to select nodes whose centers fall inside it.
Configuration
Set the activation key with key. In the example, hold Shift and drag from empty space to select, or drag without a modifier to pan.
Example
const behaviors: BehaviorOption[] = ['drag-canvas', { type: 'brush-select', key: 'shift' }];import { Graph, type BehaviorOption } from '@antv/g6-lite';
export async function run(container: HTMLElement) {
// #region behavior-config
const behaviors: BehaviorOption[] = ['drag-canvas', { type: 'brush-select', key: 'shift' }];
// #endregion behavior-config
const graph = new Graph({
container,
data: {
nodes: [
{ id: 'A', x: 0, y: 0 },
{ id: 'B', x: 120, y: -65 },
{ id: 'C', x: 120, y: 65 },
{ id: 'D', x: 240, y: 0 },
{ id: 'E', x: 360, y: 0 },
],
edges: [
{ id: 'A-B', source: 'A', target: 'B' },
{ id: 'A-C', source: 'A', target: 'C' },
{ id: 'B-D', source: 'B', target: 'D' },
{ id: 'C-D', source: 'C', target: 'D' },
{ id: 'D-E', source: 'D', target: 'E' },
],
},
node: {
style: { size: 30, label: (node) => node.id, labelOffsetY: 8 },
stateStyles: { selected: { fill: '#8050d2', haloWidth: 10 } },
},
edge: {
style: { lineWidth: 2, hitAreaWidth: 14, endArrow: false },
stateStyles: { selected: { stroke: '#8050d2', lineWidth: 4 } },
},
behaviors,
autoFit: { padding: 48, maxZoom: 1 },
});
try {
await graph.render();
return graph;
} catch (error) {
graph.destroy();
throw error;
}
}