元素、节点和边

元素常用方法

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

getModel()

获取元素的数据模型

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

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

hasState(state)

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

item.hasState('normal')

getContainer()

获取group

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

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

getType()

获取元素的类型

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

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

getBBox()

获取元素的包围盒

item.getBBox();

节点常用方法

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

getEdges()

获取与当前节点有关联的所有边

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

getInEdges()

获取与当前节点关联的所有入边

getOutEdges()

获取与当前节点关联的所有出边

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

边常用方法

getModel()

获取边的model

get(key)

获取属性值

getSource()

获取当前边的起始节点

组(group)的使用

常用方法

addShape(type,cfgs)

自定义行为

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

自定义节点

registerNode(nodeName, options, extendedNodeName)

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",],
	 }
});

自定义边

registerEdge(edgeName, options, extendedEdgeName)

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)