import React from 'react';import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin';const data = Utils.mock(10).random().graphin();const { DragCanvas, ZoomCanvas, DragNode, ActivateRelations } = Behaviors;export default () => {return (<div><Graphin data={data}><ZoomCanvas enableOptimize /><DragNode /><ActivateRelations trigger="click" /></Graphin></div>);};
Drag the canvas
| Name | Description | Type | Default |
|---|---|---|---|
| direction | -- | string | -- |
| enableOptimize | -- | boolean | -- |
| scalableRange | -- | number | -- |
| shouldBegin | -- | () => boolean | -- |
| disabled | -- | boolean | -- |
Zoom Canvas
| Name | Description | Type | Default |
|---|---|---|---|
| sensitivity | -- | number | -- |
| minZoom | -- | any | -- |
| maxZoom | -- | any | -- |
| enableOptimize | -- | boolean | -- |
| optimizeZoom | -- | number | -- |
| fixSelectedItems | -- | { fixAll: boolean; fixLineWidth: boolean; fixLabel: boolean; fixState: string; } | -- |
| disabled | -- | boolean | -- |
| animate | -- | boolean | -- |
| animateCfg | -- | { duration: number; } | -- |
brush select the canvas
| Name | Description | Type | Default |
|---|---|---|---|
| disabled | -- | boolean | -- |
| brushStyle | -- | { fill: string; fillOpacity: number; stroke: string; lineWidth: number; } | -- |
| onSelect | -- | () => void | -- |
| onDeselect | -- | () => void | -- |
| selectedState | -- | string | -- |
| trigger | -- | string | -- |
| includeEdges | -- | boolean | -- |
lasso select canvas
| Name | Description | Type | Default |
|---|---|---|---|
| disabled | -- | boolean | -- |
| delegateStyle | -- | { fill: string; fillOpacity: number; stroke: string; lineWidth: number; } | -- |
| onSelect | -- | () => void | -- |
| onDeselect | -- | () => void | -- |
| selectedState | -- | string | -- |
| trigger | -- | string | -- |
| includeEdges | -- | boolean | -- |
resize canvas
| Name | Description | Type | Default |
|---|---|---|---|
| graphDOM | -- | HTMLDivElement | (required) |