G6 V3.1.0


概述

G6是一个纯JS库,不与任何框架耦合,也就是可以在任何前端框架中使用,如 React、Vue、Angular 等。由于我们内部绝大多数都是基于 React 技术栈的,所以我们也仅提供一个 G6 在 React 中使用的 Demo。


在 React 中使用 G6,和在 HTML 中使用基本相同,唯一比较关键的区分就是在实例化 Graph 时,要保证 DOM 容器渲染完成,并能获取到 DOM 元素


在 Demo 中,我们以一个简单的流程图为例,实现如下的效果。demo.gif


功能及实现

Demo 包括以下功能点:


在 React 中,通过 ref.current 获取到真实的 DOM 元素。


 1import React, { useEffect, useState } from 'react';
 2import ReactDOM from 'react-dom';
 3import { data } from './data';
 4import G6 from '@antv/g6';
 5
 6export default function() {
 7  const ref = React.useRef(null)
 8  let graph = null
 9
10  useEffect(() => {
11    if(!graph) {
12      graph = new G6.Graph({
13        container: ref.current,
14        width: 1200,
15        height: 800,
16        modes: {
17          default: ['drag-canvas']
18        },
19        layout: {
20            type: 'dagre',
21          direction: 'LR'
22        },
23        defaultNode: {
24          shape: 'node',
25          labelCfg: {
26            style: {
27              fill: '#000000A6',
28              fontSize: 10
29            }
30          },
31          style: {
32            stroke: '#72CC4A',
33            width: 150
34          }
35        },
36        defaultEdge: {
37          shape: 'polyline'
38        }
39      })
40    }
41    graph.data(data)
42    graph.render()
43  }, [])
44
45  return (
46    <div ref={ref}></div>
47  );
48}


G6中渲染React组件

节点和边的 tooltip、节点上的右键菜单,G6 中内置的很难满足样式上的需求,这个时候我们就可以通过渲染自定义的 React 组件来实现。Tooltip 和 ContextMenu 都是普通的 React 组件,样式完全由用户控制。交互过程中,在G6 中需要做的事情就是确定何时渲染组件,以及渲染到何处。在 G6 中获取到是否渲染组件的标识值和渲染位置后,这些值就可以使用 React state 进行管理,后续的所有工作就全部由 React 负责了。


 1// 边tooltip坐标
 2const [showNodeTooltip, setShowNodeTooltip] = useState(false)
 3const [nodeTooltipX, setNodeToolTipX] = useState(0)
 4const [nodeTooltipY, setNodeToolTipY] = useState(0)
 5
 6// 监听node上面mouse事件
 7graph.on('node:mouseenter', evt => {
 8  const { item } = evt
 9  const model = item.getModel()
10  const { x, y } = model
11  const point = graph.getCanvasByPoint(x, y)
12
13  setNodeToolTipX(point.x - 75)
14  setNodeToolTipY(point.y + 15)
15  setShowNodeTooltip(true)
16})
17
18// 节点上面触发mouseleave事件后隐藏tooltip和ContextMenu
19graph.on('node:mouseleave', () => {
20  setShowNodeTooltip(false)
21})
22
23return (
24  <div ref={ref}>
25  { showNodeTooltip && <NodeTooltips x={nodeTooltipX} y={nodeTooltipY} /> }
26 </div>
27);


完整的 Demo 源码请👉戳这里


关于 G6 如何在 Vue 及 Angular 中使用,还望社区中有相关实践的同学能提供一些,供其他同学学习和参考,非常感谢!