React使用@antv/g6绘制树形图

Posted 2023-04-13

参考技术A 官网：@antv/g6
官网：React中使用@antv/g6
官网：使用dom自定义节点
⚠️ 注意: G6 的节点/边事件不支持 DOM 类型的图形。如果需要为 DOM 节点绑定事件，请使用原生 DOM 事件。例如：
官网：React中自定义节点

React 中使用 AntV G6

参考技术A 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>  );



节点和边的 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=nodeTooltipXy=nodeTooltipY/></div>);

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