React 中使用 G6

概述

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

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

在 Demo 中，我们以一个简单的流程图为例，实现如下的效果。 React 中使用 G6 - 图1

功能及实现

Demo 包括以下功能点：

  • 自定义节点；
  • 自定义边；
  • 节点的 tooltip；
  • 边的 tooltip；
  • 节点上面弹出右键菜单；
  • tooltip 及 ContextMenu 如何渲染自定义的 React 组件。

在 React 中，通过 ReactDOM.findDOMNode(ref.current) 获取到真实的 DOM 元素。

  1. import React, { useEffect, useState } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { data } from './data';
  4. import G6 from '@antv/g6';
  6. export default function() {
  7.   const ref = React.useRef(null);
  8.   let graph = null;
  10.   useEffect(() => {
  11.     if (!graph) {
  12.       graph = new G6.Graph({
  13.         container: ReactDOM.findDOMNode(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.   }, []);
  45.   return <div ref={ref}></div>;
  46. }

G6中渲染React组件

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

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

完整的 Demo 源码请👉戳这里。

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