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>);};
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
direction | 允许拖拽方向,支持'x','y','both',默认方向为 'both'; | string | -- |
enableOptimize | 是否开启优化,开启后拖动画布过程中隐藏所有的边及节点上非 keyShape 部分,默认关闭; | boolean | -- |
scalableRange | drag-canvas 可拖动的扩展范围,默认为 0,即最多可以拖动一屏的位置 当设置的值大于 0 时,即拖动可以超过一屏 当设置的值小于 0 时,相当于缩小了可拖动范围 具体实例可参考:https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IFfoS67_HssAAAAAAAAAAAAAARQnAQ | number | -- |
shouldBegin | 是否允许触发该操作; | () => boolean | -- |
disabled | 是否禁用该功能 | boolean | -- |
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
sensitivity | 缩放灵敏度,支持 1-10 的数值,默认灵敏度为 5; | number | -- |
minZoom | 最小缩放比例 | any | -- |
maxZoom | 最大缩放比例 | any | -- |
enableOptimize | 是否开启性能优化,默认为 false,设置为 true 开启,开启后缩放比例小于 optimizeZoom 时自动隐藏非 keyShape | boolean | -- |
optimizeZoom | 当 enableOptimize 为 true 时起作用,默认值为 0.7,表示当缩放到哪个比例时开始隐藏非 keyShape; | number | -- |
fixSelectedItems | 在缩小画布时是否固定选定元素的描边粗细、文本大小、整体大小等,fixSelectedItems 是一个对象,有以下变量: | { fixAll: boolean; fixLineWidth: boolean; fixLabel: boolean; fixState: string; } | -- |
disabled | 是否禁用该功能 | boolean | -- |
animate | -- | boolean | -- |
animateCfg | -- | { duration: number; } | -- |
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
disabled | 是否禁用该功能 | boolean | -- |
brushStyle | 拖动框选框的样式,包括 fill、fillOpacity、stroke 和 lineWidth 四个属性; | { fill: string; fillOpacity: number; stroke: string; lineWidth: number; } | -- |
onSelect | 选中节点时的回调,参数 nodes 表示选中的节点; | () => void | -- |
onDeselect | 取消选中节点时的回调,参数 nodes 表示取消选中的节点; | () => void | -- |
selectedState | 选中的状态,默认值为 'selected' | string | -- |
trigger | 触发框选的动作,默认为 'shift',即用户按住 Shift 键拖动就可以进行框选操作,可配置的的选项为: 'shift'、'ctrl' / 'control'、'alt' 和 'drag' ,不区分大小写 | string | -- |
includeEdges | 框选过程中是否选中边,默认为 true,用户配置为 false 时,则不选中边; | boolean | -- |
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
disabled | 是否禁用该功能 | boolean | -- |
delegateStyle | 拖动框选框的样式,包括 fill、fillOpacity、stroke 和 lineWidth 四个属性; | { fill: string; fillOpacity: number; stroke: string; lineWidth: number; } | -- |
onSelect | 选中节点时的回调,参数 nodes 表示选中的节点; | () => void | -- |
onDeselect | 取消选中节点时的回调,参数 nodes 表示取消选中的节点; | () => void | -- |
selectedState | 选中的状态,默认值为 'selected' | string | -- |
trigger | 触发框选的动作,默认为 'shift',即用户按住 Shift 键拖动就可以进行框选操作,可配置的的选项为: 'shift'、'ctrl' / 'control'、'alt' 和 'drag' ,不区分大小写 | string | -- |
includeEdges | 框选过程中是否选中边,默认为 true,用户配置为 false 时,则不选中边; | boolean | -- |
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
graphDOM | -- | HTMLDivElement | (必选) |