Graphin 组件

本文档是 <Graphin/> React 组件的 API 文档。

Props

属性类型是否必选说明
dataData图的节点和边数据
layoutLayout布局配置
optionsOptionsG6 配置
refRefGraphin 组件 Ref
extendExtend扩展配置
registerRegisterG6 自定义节点/边/行为注册配置

Data

图的节点和边数据

属性类型是否必选说明
nodesNode[ ]节点的集合
edgesEdge[ ]边的集合

Node

节点

属性类型是否必选说明
idstring唯一标示 id
dataNodeData节点附带的 key-value 数据
shapestring节点的图形类型(NodeShape)。默认值为内置的 CircleNode。可以通过 extend 对 NodeShape 进行扩展
styleNodeStyle和 NodeShape 相对应的样式信息
xnumber节点的位置信息:X 坐标(在保存下来的图数据中会有位置信息)
ynumber节点的位置信息:Y 坐标(在保存下来的图数据中会有位置信息)
layoutNodeLayoutType内置的某些布局在节点上附加的属性
[key:string]any其余用户自定义的属性,也是支持挂载的

NodeData

节点附带的 key-value 数据,properties 一般从后端返回,表示一些用于描述节点的属性。

属性类型是否必选说明
idstring节点的唯一标示 id
labelstring节点的标签文本
propertiesany[]节点的属性,任意的 key-value
[key:string]any其余任意属性

NodeStyle

和 NodeShape 相对应的样式信息。任意的 key-value 都可以。

这是 Graphin 内置 NodeShape 支持的 NodeStyle 类型:

属性默认值说明
nodeSize20节点的大小
primaryColor#9900EF节点的主要颜色
fontSize12文本的字体大小
fontColor#3b3b3b文本的字体颜色
dark#eee置灰状态下颜色
iconcompanyiconfont 的 class name
fontFamily'graphin'iconfont 的 fontFamily

NodeLayoutType

内置的某些布局在节点上附加的属性

属性类型是否必选说明
degreenumber节点度数
force{ mass?: number }力导布局相关的节点附加参数
concentric{ outerR?:number; center: { x: number; y:number;} theta: number; }同心圆布局相关的节点附加参数

Edge

属性类型是否必选说明
data{ properties: any[], [key: string]:any }边附带的数据
sourcestring边的源节点 id
targetstring边的目标节点 id
shapestring边的形态类型,默认值为 LineEdge
labelstring边的标签文本
styleany节点的样式
springnumber边的弹簧长度,力导时使用
[key:string]any其余边的属性,用户自行挂载

Layout

布局配置,详见Layout文档

Extend

扩展配置,详见Extend文档

Register

G6 自定义节点/边/行为注册配置,详见Register文档

Options

通过 props.options 传入 Graphin 的配置项。用于对 Graphin 的展示和行为进行一些高级配置。

属性类型是否必选说明
zoomnumber默认缩放比例
pixelRationumber像素比率,默认值 1.0
pan{ x: number; y: number }默认画布平移位置
disablePanboolean是否禁止画布平移
disableZoomboolean是否禁止画布缩放
disableDragboolean是否禁止节点拖动
disableHighlightboolean是否禁止节点选中高亮
wheelSensitivitynumber滚动敏感度
isZoomOptimize(graph?: Graph, e?: G6Event) => boolean;是否开启缩放时只显示 KeyShape 的优化
keyShapeZoomnumber在开启缩放 KeyShape 优化时,缩放比例小于 keyShapeZoom 的节点一直开启 KeyShape 优化,不显示内部细节。目的是为了在缩放到小比例时,隐藏细节,提升性能
autoFollowWithForceboolean力导时是否允许拖拽后其他节点重新进入力导流程
autoPinWithForceboolean力导时节点被拖拽后,如果重新进入力导流程,被拖拽的节点是否被钉在原地

另外,这个 props.options 也支持传入 G6 的 Options。详见 G6 Options

Ref

属性类型是否必选说明
graphGraphG6 的图实例
apisApisGraphin 提供的 API

Apis

属性类型说明
search(words: string) => Node[ ]搜索节点,关键词可以为 id,label,或者 property 的值
highlight(nodeIds: string[ ]) => void高亮节点
clear( ) => void重置 Graphin
getInfo{ layouts: { desc:string;icon:string;name:string}[ ], count: { nodes: number;edges:number; } }渲染数据
history{ redo: ( ) => void;undo: ( ) => void;save: ( ) => void;getInfo: ( ) => { currentStep:number;allStep:number;disableRedo:number;disableUndo:number;};}操作历史