g6 基本

基本

由 靳肖健创建, 最后修改于十二月 28, 2020

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 和 ContextMenugraph.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 实例配置到图上});