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 實例配置到圖上
});