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) |