什么是g6？

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。

重要的API

  • Graph：初始化的配置和方法；
    1
    2
    3
    初始化属性：容器、宽高、画布模式...
    渲染：加载、渲染、更新...
    布局和销毁：布局、销毁...
  • Item：node、edge的对象和方法；
    1
    包含node和edge的大小、颜色、方向、位置...
  • Event：主要事件；
    1
    node、edge、canvas等事件...
  • Shape：自定义node和edge；
    1
    自定义节点和边的属性...

拓扑实现

一、容器

1
<div ref={ref}></div>

二、实例化配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const ref = useRef(null);

const global_graph = new G6.Graph({
    container: findDOMNode(ref.current),
    animate: false,
    minZoom: 0.2,
    maxZoom: 2,
    modes: {
        default: [
            'drag-node',
            'drag-canvas',
        ],
    },
    fitView: false,
    layout: {
        type: 'default-layout',
        radiusX: 300, // 必须
        radiusY: 300, // 必须
        ordering: 'topology',
        angleRatio: 1,
    },
    nodeStateStyles: {
        hover: {
            lineWidth: 3,
            fillOpacity: 1
        },
        inhover: {
            opacity: 0.2
        }
    },
    edgeStateStyles: {
        hover: {
            lineWidth: 3
        }
    }
});

三、渲染

1
global_graph.changeData(data);

四、一些自定义功能

1、椭圆布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
G6.registerLayout('default-layout', {
  // 默认参数
  getDefaultCfg() {
    return {
      center: [ 0, 0 ],           // 布局中心
      radiusX: null,               // 默认固定x轴半径
      radiusY: null,               // 默认固定y轴半径
      startAngle: 0,              // 默认起始角度
      endAngle: 2 * Math.PI,      // 默认终止角度
      clockwise: true,            // 是否顺时针
      divisions: 1,
      ordering: null,             // 节点在环上排序的依据。可选: 'topology', 'degree', 'null'
      angleRatio: 1               // 角度比
    };
  },
  // 执行布局
  execute() {
    var self = this;
    var nodes = self.nodes;
    var edges = self.edges;
    var n = nodes.length;
    var center = self.center;
    var divisions = self.divisions;
    ...
  },

2、缩放功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
export default ({ config, handleZoom }) => {

  ...

  async function onChange(v) {
    let { step } = options;
    // 处理拖拽过快的问题
    let rang = Math.abs(v - value).toFixed(2) - 0;
    let len = (rang / step).toFixed(0) - 0;
    for(let i = 0; i < len; i++) {
      await handleZoom(v);
    }
    ...
  }

  function handleCommand(e) {
    ...
  }
  
  return (
    <div className="gg-slider">
      <Row>
        <Col span={3}>
          <Button type="link" 
            className="command"
            onClick={ () => handleCommand('minus')} size="small"  
          >
            <Icon type="minus" />
          </Button>
        </Col>
        <Col span={13}>
          <Slider 
            {...options} 
            onChange={onChange} 
            value={value} 
          />
        </Col>
        <Col span={3}>
          <Button type="link" 
            className="command"
            onClick={() => handleCommand('plus')} size="small"  
          >
            <Icon type="plus" />
          </Button>
        </Col>
        <Col span={5}>
          <Input readOnly value={percent} />
        </Col>
      </Row>
    </div>
  )
}

3、更多…

五、最终效果

demo