Java教程

g6 基本

本文主要是介绍g6 基本，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

基本

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

g6是什么

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

  • 优秀的性能

  • 丰富的元素

  • 可控的交互

  • 强大的布局

  • 便捷的组件

  • 友好的体验

http://img1.sycdn.imooc.com/5fef27900001713903370258.jpg

当时的为什么选择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 实例配置到图上});




这篇关于g6 基本的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航