G6 V3.1.0. Github: https://github.com/antvis/g6
概述
G6是一个纯JS库，不与任何框架耦合，也就是可以在任何前端框架中使用，如 React、Vue、Angular 等。由于我们内部绝大多数都是基于 React 技术栈的，所以我们也仅提供一个 G6 在 React 中使用的 Demo。
在 React 中使用 G6，和在 HTML 中使用基本相同，唯一比较关键的区分就是在实例化 Graph 时，要保证 DOM 容器渲染完成，并能获取到 DOM 元素。
在 Demo 中，我们以一个简单的流程图为例，实现如下的效果。
功能及实现
Demo 包括以下功能点：
- 自定义节点；
- 自定义边；
- 节点的 tooltip；
- 边的 tooltip；
- 节点上面弹出右键菜单；
- tooltip 及 ContextMenu 如何渲染自定义的 React 组件。
在 React 中，通过ref.current 获取到真实的 DOM 元素。
import React, {useEffect,useState} from'react';
import ReactDOM from 'react-dom';
import {data} from './data';
import G6 from'@antv/g6';
export default function() {
const ref=React.useRef(null)
let graph=null
useEffect(()=>{
if(!graph) {
graph=newG6.Graph({
container:ref.current,
width:1200,
height:800,
modes: {
default: ['drag-canvas']
},
layout: {
type:'dagre',
direction:'LR'
},
defaultNode: {
shape:'node',
labelCfg: {
style: {
fill:'#000000A6',
fontSize:10
}
},
style: {
stroke:'#72CC4A',
width:150
}
},
defaultEdge:{
shape:'polyline'
}
})
}
graph.data(data)
graph.render()
}, [])
return(<divref={ref}></div> );
}
G6中渲染React组件
节点和边的 tooltip、节点上的右键菜单，G6 中内置的很难满足样式上的需求，这个时候我们就可以通过渲染自定义的 React 组件来实现。Tooltip 和 ContextMenu 都是普通的 React 组件，样式完全由用户控制。交互过程中，在G6 中需要做的事情就是确定何时渲染组件，以及渲染到何处。在 G6 中获取到是否渲染组件的标识值和渲染位置后，这些值就可以使用 React state 进行管理，后续的所有工作就全部由 React 负责了。
// 边tooltip坐标
const [showNodeTooltip,setShowNodeTooltip]=useState(false)
const [nodeTooltipX,setNodeToolTipX]=useState(0)
const[nodeTooltipY,setNodeToolTipY]=useState(0)
// 监听node上面mouse事件
graph.on('node:mouseenter',evt=>{
const {item}=evt
const model=item.getModel()
const {x,y}=model
const point=graph.getCanvasByPoint(x,y)
setNodeToolTipX(point.x-75)
setNodeToolTipY(point.y+15)
setShowNodeTooltip(true)
})
// 节点上面触发mouseleave事件后隐藏tooltip和
ContextMenugraph.on('node:mouseleave', ()=>{
setShowNodeTooltip(false)
})
return (<divref={ref}>{showNodeTooltip&&<NodeTooltipsx={nodeTooltipX}y={nodeTooltipY}/>}</div>);
完整的 Demo 源码请👉戳这里。
