Press "Enter" to skip to content

吹会儿可视化流程图和AntvG6

本站内容均来自兴趣收集,如不慎侵害的您的相关权益,请留言告知,我们将尽快删除.谢谢.

前言

 

从JsPlumb,再到mxgraph,已热衷于图表可视化、流程图可视化、以及G6无法自拔。

 

G6是什幺

官网:G6 是一个简单、易用、完备的图可视化引擎,它在高定制能力的基础上,提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。
个人理解:旨在运用简单的绘制、布局、动画等交互能力,让复杂的关系变得透明。

先快速了解下吧

 

在Vue中的如何使用:全局引入或者在需要使用G6的文件中引入;methods中创建初始化图的方法,详细配置参考文档;在mounted或created中调用初始化方法,并使用nextTick立即更改DOM;如果有behavior、绑定监听等交互事件,则需要在初始化之前声明。

开敲吧

import G6 from "@antv/g6";   // 引入G6库
const data = { 
// 点集
nodes: [  // 手动创建两个节点
    {
      id: "node1", // String,该节点存在则必须,节点的唯一标识
      label: "Circle1", // 标签文本内容
      x: 150, // Number,可选,节点位置的 x 值
      y: 150  // Number,可选,节点位置的 y 值
    },
    {
      id: "node2",
      label: "Circle2",
      x: 400,
      y: 150
    }
  ],
   // 边集
  edges: [  // 手动添加一条连接线
    {
      source: "node1", // String,必须,起始点 id
      target: "node2"  // String,必须,目标点 id
    }
  ]
};
const graph = new G6.Graph({ // 
  container: "container", // 创建容纳G6绘制的图的容器<div></div>
  width: 500, // Number,必须,图的宽度
  height: 500, // Number,必须,图的高度
  defaultNode: {
    shape: "circle",
    size: [100],
    color: "#5B8FF9",
    style: {
      fill: "#9EC9FF",
      lineWidth: 3
    },
    labelCfg: {
      style: {
        fill: "#fff",
        fontSize: 20
      }
    }
  },
  defaultEdge: {
    style: {
      stroke: "#e2e2e2"
    }
  }
});
graph.data(data);  // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图

看看最终的效果吧;很简单,很明了,484??
更多的内容还有:实例化图时的常见配置;设置元素(/边)属性、样式;设置布局;增加交互;增加动画;使用辅助组件等等。接下来咱再深入一波

核心概念

整个图片,清晰、又明了

1:画布:既这个“图”布局,中文字“图”在大家的传统认知里指的是图画、图像,而图论与可视化中的“图”—— Graph 则有着更精确的定位:主体(objects)与关系(relationships)的组成。它甚至不局限于视觉,主体与关系的数据也可以称为图。Graph(图) 对象的生命周期为:初始化 —> 加载数据 —> 渲染 —> 更新 —> 销毁。

This is a canvas。。。

const graph = new G6.Graph({
  container: 'mountNode', // 指定图画布的容器 id,与第 9 行的容器对应
  // 画布宽高
  width: 800,
  height: 500,
});

2:元素节点:首先图的元素(Item)包含图上的节点 Node 、边 Edge 和 Combo 三大类。G6中节点,边,分组都是元素,结构公用。此类对象都定义在图数据中,被render方法渲染在画布上。如果没有交互事件配合,元素将只是通过定义生成在画布上的图形。 分为内置节点和自定义节点,(很苦恼,实际项目中一开始就要自定义各种节点,,,)
3:边:G6 提供了 9 种内置边;你甚至可以自定义边(很苦恼,实际项目中一开始就要自定义各种边,,,)
4:样式、状态:实例化 Graph 时,可以通过在 defaultNode 或 defaultEdge 中指定 style 分别配置全局节点和全局边的样式属性。实例化 Graph 时,可以通过在 defaultNode 或 defaultEdge 中指定 labelCfg 属性修改文本的样式。这种方式指定了全局的文本样式。
5:

6:交互:包含节点动画、边动画、状态切换、节点移动动画、以及自定义的动画。

项目实践

Combo:(干嘛的呢?),“节点分组”是非常实用的一个功能;分为内置combo和自定义combo。 就这玩意儿

项目实际运用: 主要用到了自定义的Combo、自定义节点元素、自定义连接线;

结语

 

很多地方吹的不是很详细,一些秘密武器需要研究一波才有所了解。希望能对G6有兴趣的老铁们一点帮助。跟多详情请look look官网 g6.antv.vision/zh/docs/man…

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注