g6 基本

g6是什么

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单

• 优秀的性能
• 丰富的元素
• 可控的交互
• 强大的布局
• 便捷的组件
• 友好的体验

当时的为何选择g6?

1.g6的例子更加直观,感受更容易移植扩展.初始成本比较低

2.相比d3的文档感受更有结构性,从了解到深刻更容易一些

3.如今edr的图开发绘图库,想换成antv主导,的g2/g6库

在此次工做中个人理解：

首先可视化信息分析主要就是展现事件之间的关系.也就是点线关系.

这套库是辅助开发人员处理图像可视化中点线关系绘图的一个辅助库，使用g6，你能够比较方便的去获取/定义点、线，处理他们之间的关联关系，位置信息。同时他也提供通用布局方式，减轻点位计算的难度. 

 他定义了一套事件系统、状态系统来方便处理这交互上的问题，并提供了一些分析组件来简化开发用户的交互功开发

• react基本绘制方法

引入绘制

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 = new G6.Graph({
        container: ReactDOM.findDOMNode(ref.current),
 //其余配置信息
      });
    }
    graph.data(data);
    graph.render();
  }, []);

  return <div ref={ref}></div>;
}

外界通讯

// 边 tooltip 坐标
const [showNodeTooltip, setShowNodeTooltip] = useState(false);

// 监听 node 上面 mouse 事件
graph.on('node:mouseenter', (evt) => {
  setShowNodeTooltip(true);
});

// 节点上面触发 mouseleave 事件后隐藏 tooltip 和 ContextMenu
graph.on('node:mouseleave', () => {
  setShowNodeTooltip(false);
});

return <div ref={ref}>{showNodeTooltip && <NodeTooltips x={nodeTooltipX} y={nodeTooltipY} />}</div>;

• 远程数据加载

const response = await fetch(
      'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
    );
    const remoteData = await response.json();
  graph.data(remoteData); // 加载远程数据
    graph.render(); // 渲染

<Box data={dataTree} isLoading={loadTree} >
useEffect(()=>{},[])

• 属性配置

图的元素特指图上的节点 Node 和边 Edge 。

// 默认
new G6.Graph({
     defaultNode: {},
     defaultEdge: {}
})

//绘制
   attrs: {
                stroke: cfg.has_threat ? 'red' : 'gray',
                path,
                opacity: 1,
                endArrow: cfg.has_threat ? {
                  path: G6.Arrow.triangle(5, 10, 0),
                  d: 0,
                  stroke: 'red',
                  fill: 'red'
                } : undefined
              },

//节点
node.x = newXY.x + center[0]
node.y = newXY.y + center[1]

//数据导入
  nodes: [
    {
      id: 'node1',
      styles: {
        // 默认样式
      },
      stateStyles: {
        //... 见上方例子
      },
      // ...
    },
  ],

• 布局运用

//点线数据
{
nodes:[{id:1}],
edges:[]
}
//树数据
{
id:1,
children:[{id:2}]
}

• 交互

监听

// 在图实例 graph 上监听
graph.on('元素类型:事件名', (e) => {
  // do something
  //涉及节点状态管理
});

状态

graph.setItemState(item, 'nodeClick', true)  

// 节点不一样状态下的样式集合
  nodeStateStyles: {
    // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
    nodeClick: {
      fill: 'lightsteelblue',
    },
  },

行为

modes: {
    default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 容许拖拽画布、放缩画布、拖拽节点
  },

• 插件

// 实例化 minimap 插件
const minimap = new G6.Minimap({
  size: [100, 100],
  className: 'minimap',
  type: 'delegate',
});

// 实例化图
const graph = new G6.Graph({
  // ...                           // 其余配置项
  plugins: [minimap], // 将 minimap 实例配置到图上
});