关于api:一文讲述G6实现流程图绘制的常用方法

67次阅读

共计 5987 个字符，预计需要花费 15 分钟才能阅读完成。

摘要：G6 是一个图可视化引擎。它提供了图的绘制、布局、剖析、交互、动画等图可视化的根底能力。

本文分享自华为云社区《会用这些的 api，轻松绘制流程图——antv.g6 流程图入门》，作者：一枚搬砖工。

graph = new G6.Graph({
    container: "container",
    height: 500,
    width: 500,
    modes: {
        default: [
            "drag-canvas",
            "hover-node",
            "select-node",
            "hover-edge",
            "keyboard",
            "customer-events"
        ],
        addEdge: ["add-edge"],
        moveNode: ["drag-item"]
    },
     renderer: 'svg'
     plugins: [grid]
});

data(data)
const data = {
  nodes: [
    {
      id: 'node1',
      label: 'node1',
    },
    {
      id: 'node2',
      label: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

// graph 是 Graph 的实例
graph.data(data);

新增元素（节点和边）

如果是自定义节点或者边 type 为自定义节点或者边的名称

新增元素（节点和边）

this.edge = this.graph.addItem('edge', {
    source: item,
    target: item,
    start: startPoint,
    end: startPoint,
    type: 'link-edge'
});

移除节点或边

const node = this.graph.findById(item.id)

this.graph.remove(node)
removeItem(item, stack)

删除元素，当 item 为 group ID 时候，则删除分组

// 通过 ID 查问节点实例
const item = graph.findById('node');
graph.removeItem(item);

// 该操作不会进入到 undo & redo 栈，即 redo & undo 操作会疏忽该操作
graph.removeItem(item, false);
// 删除边
graph.removeItem(edge)

更新某个节点或者边的属性

graph.update(node, {name:1});
graph.update(edge, {name:1});

更新元素，包含更新数据、款式等。若图上有 combo，应用该函数更新一个节点地位后，须要调用 updateCombo(combo) 以更新相干 combo 的地位。

graph.updateItem(edge, {routeName: response.routeName});

依据具体规定查找单个元素。

const findNode = graph.find('node', (node) => {return node.get('model').x === 100;
});

依据 ID，查问对应的元素实例

查找所有处于指定状态的元素

graph.findAllByState('node', 'selected')

获取图中所有节点的实例。

⚠️ 留神: 这里返回的是节点的实例，而不是节点的数据项。

返回值类型：Array；

设置元素状态，当你应用自定义 node 节点时，setItemState 办法为该办法内的 setState 办法。

graph.setItemState(item, 'normal', true);

因为从屏幕获取的地位与 canvas 的地位不同，所以这个办法是减去了 canvas 的 left 和 top 后的地位

获取以后视口的缩放比例

// 以 (100, 100) 为中心点，放大 3 倍
graph.zoomTo(3, { x: 100, y: 100});

// 以以后元素地位为核心，放大到 0.5
graph.zoomTo(0.5);

// 获取 group
const group = graph.get('group');

// 获取 canvas 实例
const canvas = graph.get('canvas');

// 获取 autoPaint 值
const autoPaint = graph.get('autoPaint');
const width = graph.get("width");
const height = graph.get("height");

删除画布就是 canvas

graph.destroy()

设置是否在更新 / 删除后主动重绘，个别搭配 paint() 办法应用。与 setItemState 搭配应用，在扭转元素状态前后调用，当你应用自定义 node 节点时，setItemState 办法为该办法内的 setState 办法，调用 setItemState 其实就是调用该 node 的 setState 办法。

const item = e.item;
const graph = this.graph;

const autoPaint = graph.get('autoPaint');
graph.setAutoPaint(false);

graph.setItemState(item, 'selected', true);

graph.paint();
graph.setAutoPaint(autoPaint);

仅从新绘制画布。当设置了元素款式或状态后，通过调用 paint() 办法，让批改失效。

当源数据中现有节点 / 边 / Combo 的数据项产生配置的变更时，依据新数据刷新视图

graph.refresh();

切换模式，指的是在自定义行为中所定义的模式
这里的模式指的是 graph 的配置项 modes

graph = new G6.Graph({
    modes: {
        default: [
            "drag-canvas",
            "hover-node",
            "hover-edge",
            "keyboard",
        ],
        addEdge: ["add-edge"],
        moveNode: ["drag-item"]
    },
});
const behavors = {
    'hover-node': hoverNode,
    'add-edge': addLine,
    'drag-item': dragItem,
    'select-node': selectNode,
    'hover-edge': hoverEdge,
    'keyboard':keyboard
};
export function initBehavors() {for (let key in behavors) {G6.registerBehavior(key, behavors[key])
    }
}
this.graph.setMode('default')

概念：元素是蕴含节点和边的实例

获取元素的数据模型

// 获取元素的数据模型
const model = item.getModel();

// 等价于
const model = item.get('model');

判断元素是否具备某种指定的状态

item.hasState('normal')

获取 group

// 获取元素的容器
const group = item.getContainer();

// 等价于
const group = item.get('group');

获取元素的类型

// 获取元素的类型
const type = item.getType();

// 等价于
const type = item.get('type');

获取元素的突围盒

item.getBBox();

概念：节点继承至元素，元素所有的办法节点也有

获取与以后节点有关联的所有边

// 获取与 node 关联的所有边
const edges = node.getEdges();

获取与以后节点关联的所有入边

获取与以后节点关联的所有出边

// 获取与 node 关联的所有出边
const edges = node.getOutEdges();

获取边的 model

获取属性值

获取以后边的起始节点

G6 的自定义机制，包含自定义节点、自定义边、自定义 combo、自定义交互行为、自定义布局的相干办法。它们都被挂载在 G6 全局上，通过 G6.registerXXX 进行调用。

G6.registerNode(
  'nodeName',
  {
    /**
     * 绘制节点，蕴含文本
     * @param  {Object} cfg 节点的配置项
     * @param  {G.Group} group 图形分组，节点中的图形对象的容器
     * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 能够获取到
     */
    draw(cfg, group) {},
    /**
     * 绘制后的附加操作，默认没有任何操作
     * @param  {Object} cfg 节点的配置项
     * @param  {G.Group} group 图形分组，节点中的图形对象的容器
     */
    afterDraw(cfg, group) {},
    /**
     * 更新节点，蕴含文本
     * @override
     * @param  {Object} cfg 节点的配置项
     * @param  {Node} node 节点
     */
    update(cfg, node) {},
    /**
     * 更新节点后的操作，个别同 afterDraw 配合应用
     * @override
     * @param  {Object} cfg 节点的配置项
     * @param  {Node} node 节点
     */
    afterUpdate(cfg, node) {},
    /**
     * 设置节点的状态，次要是交互状态，业务状态请在 draw 办法中实现
     * 单图形的节点仅思考 selected、active 状态，有其余状态需要的用户本人复写这个办法
     * @param  {String} name 状态名称
     * @param  {Object} value 状态值
     * @param  {Node} node 节点
     */
    setState(name, value, node) {},
    /**
     * 获取锚点（相干边的连入点）* @param  {Object} cfg 节点的配置项
     * @return {Array|null} 锚点（相干边的连入点）的数组, 如果为 null，则没有锚点
     */
    getAnchorPoints(cfg) {},},
  'extendedNodeName',
);

1. 必须有自定义文件
2. 必须应用 registerBehavior
3.modes 中增加注册的行为

自定义文件：selectNode.js, 内容如下：

// 自定义文件
let selectNode = {getEvents(){
        return {'node:click':'onClick'}
    },
    onClick(e){console.log(e)
    }
}
// 注册自定义行为
this.behavors = {'select-node':selectNode}
 
for(let key in this.behavors){G6.registerBehavior(key,this.behavors[key])
}
//Graph 对象中援用该行为
const graph = new G6.Graph({
    container: 'flow_container', 
    width, 
    height,
    fitCenter: true,
    modes: {default: ["select-node",],
     }
});

G6.registerEdge(
  'edgeName',
  {
    /**
     * 绘制边，蕴含文本
     * @param  {Object} cfg 边的配置项
     * @param  {G.Group} group 图形分组，边中的图形对象的容器
     * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 能够获取到
     */
    draw(cfg, group) {},
    /**
     * 绘制后的附加操作，默认没有任何操作
     * @param  {Object} cfg 边的配置项
     * @param  {G.Group} group 图形分组，边中的图形对象的容器
     */
    afterDraw(cfg, group) {},
    /**
     * 更新边，蕴含文本
     * @override
     * @param  {Object} cfg 边的配置项
     * @param  {Edge} edge 边
     */
    update(cfg, edge) {},
    /**
     * 更新边后的操作，个别同 afterDraw 配合应用
     * @override
     * @param  {Object} cfg 边的配置项
     * @param  {Edge} edge 边
     */
    afterUpdate(cfg, edge) {},
    /**
     * 设置边的状态，次要是交互状态，业务状态请在 draw 办法中实现
     * 单图形的边仅思考 selected、active 状态，有其余状态需要的用户本人复写这个办法
     * @param  {String} name 状态名称
     * @param  {Object} value 状态值
     * @param  {Edge} edge 边
     */
    setState(name, value, edge) {},},
  'extendedEdgeName',
);

以上就是通过 G6 绘制流程图相干的罕用办法，心愿对大家有所帮忙~

想理解更多的 AI 技术干货，欢送上华为云的 AI 专区，目前有 AI 编程 Python 等六大实战营供大家收费学习。(六大实战营 link:http://su.modelarts.club/qQB9)

点击关注，第一工夫理解华为云陈腐技术~

正文完

api

发表至： api

2021-08-25

0

关于api:得物-API一站式协作平台的一些思考

关于api:API提取和隧道转发有什么区别到底如何选择

关于api:APISpace-IP归属地API

关于api:如何使用-驾驶证OCR-API

关于mysql:MySQL高级索引分析和优化笔记下

关于api:一文讲述G6实现流程图绘制的常用方法

罕用 graph 属性和办法

graph 属性

container

height

width

modes

graph 办法

初始化数据

节点和边的增删改查

add(type,model)

addItem(type, model, stack)

remove(node/edge)

update(node/edge,nodeModel/edgeModel)

updateItem(item, model, stack)

find(type, fn)

findById(id)

findAllByState(type,state)

getNodes()

节点和边的状态相干

setItemState(item, state, value)

坐标转化

getPointByClient(clientX, clientY)

视线相干

getZoom()

zoomTo(toRatio, center)

属性相干

get(key)

画布相干

destroy()

setAutoPaint(auto)

paint()

refresh()

setMode(mode)

元素、节点和边

元素罕用办法

getModel()

hasState(state)

getContainer()

getType()

getBBox()

节点罕用办法

getEdges()

getInEdges()

getOutEdges()

边罕用办法

getModel()

get(key)

getSource()

组 (group) 的应用

罕用办法

addShape(type,cfgs)

自定义行为

自定义节点

registerNode(nodeName, options, extendedNodeName)

注册自定义行为注意事项

自定义边

registerEdge(edgeName, options, extendedEdgeName)

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）