Usage

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

DragCanvas

Drag the canvas

API

NameDescriptionTypeDefault
direction--string--
enableOptimize--boolean--
scalableRange--number--
shouldBegin--() => boolean--
disabled--boolean--

ZoomCanvas

Zoom Canvas

API

NameDescriptionTypeDefault
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; }--

BrushSelect

brush select the canvas

API

NameDescriptionTypeDefault
disabled--boolean--
brushStyle--{ fill: string; fillOpacity: number; stroke: string; lineWidth: number; }--
onSelect--() => void--
onDeselect--() => void--
selectedState--string--
trigger--string--
includeEdges--boolean--

LassoSelect

lasso select canvas

API

NameDescriptionTypeDefault
disabled--boolean--
delegateStyle--{ fill: string; fillOpacity: number; stroke: string; lineWidth: number; }--
onSelect--() => void--
onDeselect--() => void--
selectedState--string--
trigger--string--
includeEdges--boolean--

ResizeCanvas

resize canvas

API

NameDescriptionTypeDefault
graphDOM--HTMLDivElement(required)