分析组件

<ContextMenu /> 组件

Props:

属性类型是否必选说明
bindType'node' | 'edge' | 'canvas'事件的监听对象类型,默认值为 node
graphGraphG6 实例
optionsMenuItemType[]菜单项配置
render(props: RenderProps) => React.ReactElement自定义的菜单渲染函数
onContextmenu(e: G6Event, graph: Graph) => boolean;右键菜单事件的 hook 函数。返回 false 可以阻止右键菜单出现

注意:options 和 render 必须提供一个。

RenderProps

ContextMenu render 函数的参数。

RenderProps extend 了 ContextMenu 的 Props:

属性类型是否必选说明
onClose( ) => void;隐藏右键菜单事件回调

MenuItemType

MenuItem 的配置项

属性类型是否必选说明
keystringReact 组件 key
visiblebooleanG6 实例
iconTypestringantd icon 类型
titlestring菜单项文本
widthnumber菜单宽度
heightnumber菜单高度
onClick(props: ContainerProps) => void;点击回调
render(props: ContainerProps) => ReactElement;自定义渲染函数

ContainerProps

MenuItem 点击和渲染函数的参数

属性类型是否必选说明
graphGraphG6 实例
menuMenuItemType[ ]菜单项配置
onClose( ) => void;隐藏右键菜单事件回调

<Toolbar /> 组件

Props:

属性类型是否必选说明
graphDOMHTMLElementG6 挂载的 DOM 节点,Graphin 组件的子组件会被自动注入
graphGraphG6 实例
apisApisGraphin API
classNamestring类名
graphVars{ width?: number; height: number; }G6 图表信息
directionhorizontal | verticalToolbar 布局方向
render(props: RenderProps) => MenuItem[ ]自定义工具栏菜单渲染函数

MenuItem

属性类型是否必选说明
idstring唯一标识
namestring菜单项文本
iconstring菜单项 icon 类型(antd)
actionhorizontal | vertical点击事件回调
disabledboolean是否禁用菜单项
styleCSSProperties自定义样式
renderTooltip() => ReactElement;自定义工具栏渲染函数

RenderProps

属性类型是否必选说明
toolbarCfgMenuItem[]默认的工具栏配置数组
graphGraphG6 实例
apisApisGraphin API
graphVars{ width?: number; height: number; }G6 图表信息
directionhorizontal | verticalToolbar 布局方向