乐趣区

关于前端:g6-基本

jiezi

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 实例配置到图上
});
退出移动版