编写组件，react真香

  1. import React,{ useEffect, useState } from 'react'
  2. import { data } from './data';
  3. import G6 from '@antv/g6';
  4. export const G6Dome = (props)=>{
  5.     const [ graph, setGraph ] = useState(undefined);
  8.     useEffect(() => {
  9.         if (!graph){
  10.             const devicegraph = new G6.Graph({
  11.                 container: "container",     //指定容器
  12.                 width: 500,     //容器宽度
  13.                 height: 500,       //容器高度
  14.                 defaultNode: {   //节点对象
  15.                     shape: "circle",
  16.                     size: [80],
  17.                     color: "#5B8FF9",
  18.                     style: {
  19.                         fill: "#9EC9FF",
  20.                         lineWidth: 1
  21.                     },
  22.                     labelCfg: {
  23.                         style: {
  24.                             fill: "#fff",
  25.                             fontSize: 20
  26.                         }
  27.                     }
  28.                 },
  29.                 defaultEdge: {          //边缘对象
  30.                     style: {
  31.                         stroke: "#333"
  32.                     }
  33.                 }
  35.             });
  36.             devicegraph.read(data);
  37.             setGraph(devicegraph);
  38.         }
  39.     }, [])
  41.     return <div  >
  42.         <h3> 拖拽流程图</h3>
  43.         <div id='container'> </div>
  44.     </div>
  45. }

数据源

  1. export const data = {
  2.     nodes: [
  3.         {
  4.             id: 'node1', // 节点的唯一标识
  5.             x: 100, // 节点横坐标
  6.             y: 200, // 节点纵坐标
  7.             label: '起始点', // 节点文本
  8.         },
  9.         {
  10.             id: 'node2',
  11.             x: 300,
  12.             y: 200,
  13.             label: '目标点',
  14.         },
  15.     ],
  16.     edges: [
  17.         {
  18.             source: "node1",
  19.             target: "node2",
  20.             label: '联线描述'
  21.         }
  22.     ]
  23. }

元素的属性

{
    id: 'node0',          // 元素的 id
  type: 'circle',      // 元素的图形
  size: 40,             // 元素的大小
  label: 'node0'        // 标签文字
  labelCfg: {           // 标签配置属性
    positions: 'center',// 标签的属性，标签在元素中的位置
    style: {            // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
      fontSize: 12      // 标签的样式属性，文字字体大小
      // ...            // 标签的其他样式属性
    }
  }
  // ...,               // 其他属性
  style: {              // 包裹样式属性的字段 style 与其他属性在数据结构上并行
    fill: '#000',       // 样式属性，元素的填充色
    stroke: '#888',     // 样式属性，元素的描边色
    // ...              // 其他样式属性
  }
}

布局

layout: {
    type: 'force', // 设置布局算法为 force
    linkDistance: 100, // 设置边长为 100
    preventOverlap: true, // 设置防止重叠
}

一般图

  • Random Layout：随机布局；

  • Force Layout：经典力导向布局：

    力导向布局：一个布局网络中，粒子与粒子之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。

  • Circular Layout：环形布局；

  • Radial Layout：辐射状布局；
  • MDS Layout：高维数据降维算法布局；
  • Fruchterman Layout：Fruchterman 布局，一种力导布局；
  • Dagre Layout：层次布局。

树形图

  • Dendrogram Layout：树状布局（叶子节点布局对齐到同一层）；
  • CompactBox Layout：紧凑树布局；
  • Mindmap Layout：脑图布局；
  • Intended Layout：缩进布局。