{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-9189a97da3cfb91bb1d737121c5eb09f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

概述

\n

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

\n

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

\n

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

\n

功能及实现

\n

Demo 包括以下功能点：

\n\n

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

\n
import React, { useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { data } from './data';\nimport G6 from '@antv/g6';\n\nexport default function() {\n  const ref = React.useRef(null);\n  let graph = null;\n\n  useEffect(() => {\n    if (!graph) {\n      graph = new G6.Graph({\n        container: ReactDOM.findDOMNode(ref.current),\n        width: 1200,\n        height: 800,\n        modes: {\n          default: ['drag-canvas'],\n        },\n        layout: {\n          type: 'dagre',\n          direction: 'LR',\n        },\n        defaultNode: {\n          shape: 'node',\n          labelCfg: {\n            style: {\n              fill: '#000000A6',\n              fontSize: 10,\n            },\n          },\n          style: {\n            stroke: '#72CC4A',\n            width: 150,\n          },\n        },\n        defaultEdge: {\n          shape: 'polyline',\n        },\n      });\n    }\n    graph.data(data);\n    graph.render();\n  }, []);\n\n  return <div ref={ref}></div>;\n}\n
\n

G6中渲染React组件

\n

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

\n
// 边tooltip坐标\nconst [showNodeTooltip, setShowNodeTooltip] = useState(false);\nconst [nodeTooltipX, setNodeToolTipX] = useState(0);\nconst [nodeTooltipY, setNodeToolTipY] = useState(0);\n\n// 监听node上面mouse事件\ngraph.on('node:mouseenter', evt => {\n  const { item } = evt;\n  const model = item.getModel();\n  const { x, y } = model;\n  const point = graph.getCanvasByPoint(x, y);\n\n  setNodeToolTipX(point.x - 75);\n  setNodeToolTipY(point.y + 15);\n  setShowNodeTooltip(true);\n});\n\n// 节点上面触发mouseleave事件后隐藏tooltip和ContextMenu\ngraph.on('node:mouseleave', () => {\n  setShowNodeTooltip(false);\n});\n\nreturn (\n  <div ref={ref}>\n    {showNodeTooltip && <NodeTooltips x={nodeTooltipX} y={nodeTooltipY} />}\n  </div>\n);\n
\n

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

\n

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

"}