G6文档

venmos 发布于2019-08-26 14:05 / 3401人阅读

这个项目采用的是G6（阿里开源），由于现在已经没有维护了，导致很多的配置，参数，方法示例demo等都是自己摸索的，大概介绍下本案例中使用到的以及一些后续维护可能会用到的。

Editor 该类是整个编辑器的主控类，其主要职责是将编辑器的各个组件协同起来。

</>复制代码 
//实例化：
import G6Editor from "@antv/g6-editor"
const editor = new G6Editor()
//实例方法：
add // 可以理解为vue的添加组件
editor.add(this.flow)
save // 保存数据（Object类型，里面存放nodes以及edges，对应节点和连线）
let data = this.flow.save()
read // 读取数据
this.data && this.flow.read(this.data)
getGraph // 获取流图示例
this.graph = this.flow.getGraph()
getCurrentPage // 获取当前页面
this.page = editor.getCurrentPage()
hideGrid // 背景以网格的形式呈现
this.page.hideGrid()
on // 事件监听
this.page.on("afteritemselected", e => { //处理数据 })
Destory // 销毁（相当于vue的destoryed生命周期）
this.page.destory()

Flow 继承自Editor的page，专用于构建有向流程图编辑器。
实例化：

</>复制代码 
new Editor.flow()

配置项
主要介绍下配置项，也是项目中用到最多的。
Graph G6图的配置项，语雀上可以搜到。
Align 文本对齐。
Grid 网格线的配置
Shortcut 快捷键的配置

</>复制代码 
this.flow = new G6Editor.Flow({
    graph: { container: this.$refs.flow },
    align: { grid: true },// 网格对齐
    grid: { cell: 10 },// 网孔尺寸
    shortcut: {
        zoomIn: true, // 开启放大快捷键
        zoomOut: true // 开启视口缩小快捷键
    }
})

节点的配置项

</>复制代码 
this.graph.node({ 
    id: "node1", // id 必须唯一 
    color: "#333", // 颜色
    size: 10 || [10, 10], // 尺寸 || [宽, 高] 
    shape: "circle", // 所用图形 
    style: { // 关键形样式（优先级高于color） 
        fill: "red", 
        stroke: "blue" 
    },
    label: "文本标签" || { // 文本标签 || 文本图形配置 
        text: "文本标签", 
        fill: "green" 
    },
    parent: "group1", // 所属组 
    index: 1, // 渲染层级 
})

线的配置项

</>复制代码 
this.graph.edge({ id: "edge1", // id 必须唯一 
    source: "node1", // 源节点 id 
    target: "node2", // 目标节点 id 
    controlPoints: [{ // 控制点 
        x: 10, y: 10 
    }], 
    sourceAnchor: 0, // 源节点锚点 
    targetAnchor: 2, // 目标节点锚点 
    shape: "line", // 所用图形 
    style: { // 关键形样式（优先级高于color） 
        fill: "red", 
        stroke: "blue" 
    },
    label: "文本标签" || { // 文本标签 || 文本图形配置 
    text: "文本标签", 
    fill: "green"
    },
    labelRectStyle: { // 文本矩形底的样式 
        fill: "blue" 
    },
    parent: "group1", // 所属组 
    index: 1, // 渲染层级 
}),

状态改变触发的事件

</>复制代码 
flow.on("beforeitemselected", e=>{}); // 选中前 
flow.on("afteritemselected", e=>{}); // 选中后 
flow.on("beforeitemunselected", e=>{}); // 取消选中前 
flow.on("afteritemunselected", e=>{}); // 取消选中后

数据改变触发的事件

</>复制代码 
flow.on("beforechange", e=>{}); // 图数据变更前 
flow.on("afterchange", e=>{}); // 图数据变更后

云服务器 GPU云服务器阿里云服务器g5和g6 文档办公存储文档软件文档

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110015.html

G6的插件系统

摘要：的插件系统做的相当完善可惜文档没有具体说到这里整理一下的插件插件大致分为四种类型行为可以理解为事件处理的插件就是和的样式同样是插件插件的布局之类这部分涉及的算法比较多插件就是自定义工具函数将其内置中这四种插件都有各自的写法以及但是文档中没有 G6的插件系统做的相当完善, 可惜文档没有具体说到. 这里整理一下g6的插件. 插件大致分为四种类型: behaviour 行为, 可以理解为事...

Ilikewhite 2019-08-23 13:43 评论0 收藏0
初见 g6 图表库

摘要：准备好数据节点节点节点坐标节点坐标边节点，从哪里出发节点，到哪里结束初始化对象容器渲染位置，表示渲染到图表的中间位置画布高渲染数据这是渲染出来的效果。链接线会以元素为基准。绘制元素时，需要在初始化对象的时候，指定。 hello world // 1. 准备好数据 // node(节点) let nodes = [ { id: 1, // 节点 id ...

LittleLiByte 2019-08-23 16:22 评论0 收藏0
antV G6流程图在Vue中的使用

原文首发于我的博客，欢迎点击查看获得更好的阅读体验~ 更新内容最新版本请关注G6官方的github仓库https://github.com/antvis/g6 2.x版本后,可以通过npm install直接安装使用了相关资源下载 antV G6( v1.2.8) 字体图标最近我司项目中需要加入流程图制作功能，于是乎百度各种找可视化绘制拓扑图的轮子，大部分都是国外的，看...

cnio 2019-08-02 16:06 评论0 收藏0
antV G6流程图在Vue中的使用

原文首发于我的博客，欢迎点击查看获得更好的阅读体验~ 更新内容最新版本请关注G6官方的github仓库https://github.com/antvis/g6 2.x版本后,可以通过npm install直接安装使用了相关资源下载 antV G6( v1.2.8) 字体图标最近我司项目中需要加入流程图制作功能，于是乎百度各种找可视化绘制拓扑图的轮子，大部分都是国外的，看...

张宪坤 2019-08-23 12:02 评论0 收藏0