G6

G6.registerNode(nodeName, options, extendNodeName)

当内置节点不满足需求时，可以通过G6.registerNode(nodeName, options, extendNodeName)方法自定义节点。

参数

名称类型是否必选描述
nodeNamestringtrue自定义节点名称，需保持唯一性。
optionsobjecttrue自定义节点时的配置项，配置项中包括完整的生命周期方法，具体请参考：Shape 文档。
extendNodeNamestringfalse自定义节点时可基于内置节点进行定义，该字段表示内置节点名称，所有内置节点请参考：内置节点。

用法

  1. G6.registerNode(
  2.   'nodeName',
  3.   {
  4.     /**
  5.      * 绘制节点/边，包含文本
  6.      * @param  {Object} cfg 节点的配置项
  7.      * @param  {G.Group} group 节点的容器
  8.      * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到
  9.      */
  10.     draw(cfg, group) {},
  11.     /**
  12.      * 绘制后的附加操作，默认没有任何操作
  13.      * @param  {Object} cfg 节点的配置项
  14.      * @param  {G.Group} group 节点的容器
  15.      */
  16.     afterDraw(cfg, group) {},
  17.     /**
  18.      * 更新节点，包含文本
  19.      * @override
  20.      * @param  {Object} cfg 节点的配置项
  21.      * @param  {Node} node 节点
  22.      */
  23.     update(cfg, node) {},
  24.     /**
  25.      * 更新节点后的操作，一般同 afterDraw 配合使用
  26.      * @override
  27.      * @param  {Object} cfg 节点的配置项
  28.      * @param  {Node} node 节点
  29.      */
  30.     afterUpdate(cfg, node) {},
  31.     /**
  32.      * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现
  33.      * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法
  34.      * @param  {String} name 状态名称
  35.      * @param  {Object} value 状态值
  36.      * @param  {Node} node 节点
  37.      */
  38.     setState(name, value, node) {},
  39.     /**
  40.      * 获取控制点
  41.      * @param  {Object} cfg 节点、边的配置项
  42.      * @return {Array|null} 控制点的数组,如果为 null，则没有控制点
  43.      */
  44.     getAnchorPoints(cfg) {},
  45.   },
  46.   'extendNodeName',
  47. );

G6.registerEdge(edgeName, options, extendEdgeName)

当内置的边不能满足需求时，可以通过registerEdge(edgeName, options, extendEdgeName)方法注册自定义的边。

参数

名称类型是否必选描述
edgeNamestringtrue自定义边的名称
optionsobjecttrue自定义边时的配置项，配置项中包括完整的生命周期方法，具体请参考：Shape 文档。
extendEdgeNamestringfalse自定义边时可基于内置边进行定义，该字段表示内置边的名称，所有内置边请参考：内置边。

用法

  1. G6.registerEdge(
  2.   'edgeName',
  3.   {
  4.     /**
  5.      * 绘制节点/边，包含文本
  6.      * @param  {Object} cfg 节点的配置项
  7.      * @param  {G.Group} group 节点的容器
  8.      * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到
  9.      */
  10.     draw(cfg, group) {},
  11.     /**
  12.      * 绘制后的附加操作，默认没有任何操作
  13.      * @param  {Object} cfg 节点的配置项
  14.      * @param  {G.Group} group 节点的容器
  15.      */
  16.     afterDraw(cfg, group) {},
  17.     /**
  18.      * 更新节点，包含文本
  19.      * @override
  20.      * @param  {Object} cfg 节点的配置项
  21.      * @param  {Node} node 节点
  22.      */
  23.     update(cfg, node) {},
  24.     /**
  25.      * 更新节点后的操作，一般同 afterDraw 配合使用
  26.      * @override
  27.      * @param  {Object} cfg 节点的配置项
  28.      * @param  {Node} node 节点
  29.      */
  30.     afterUpdate(cfg, node) {},
  31.     /**
  32.      * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现
  33.      * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法
  34.      * @param  {String} name 状态名称
  35.      * @param  {Object} value 状态值
  36.      * @param  {Node} node 节点
  37.      */
  38.     setState(name, value, node) {},
  39.   },
  40.   'extendEdgeName',
  41. );

G6.registerBehavior(behaviorName, behavior)

当内置的 Behavior 不能满足需求时，使用registerBehavior(behaviorName, behavior)方法注册自定义的交互行为。

参数

名称类型是否必选描述
behaviorNamestringtrue自定义 Behavior 的名称
behaviorobjecttrue自定义 behavior 时的配置项，配置项中包括的方法及作用具体请参考：Behavior 文档。

用法

  1. // 注册自定义Behavior
  2. G6.registerBehavior('behaviorName', {
  3.   // 设置事件及处理事件的回调之间的对应关系
  4.   getEvents() {
  5.     return {
  6.       'node:click': 'onClick',
  7.       mousemove: 'onMousemove',
  8.       'edge:click': 'onEdgeClick',
  9.     };
  10.   },
  11.   /**
  12.    * 处理node:click事件的回调
  13.    * @override
  14.    * @param  {Object} evt 事件句柄
  15.    */
  16.   onClick(evt) {
  17.     const node = evt.item;
  18.     const graph = this.graph;
  19.     const point = { x: evt.x, y: evt.y };
  20.     const model = node.getModel();
  21.     // TODO
  22.   },
  23.   /**
  24.    * 处理mousemove事件的回调
  25.    * @override
  26.    * @param  {Object} evt 事件句柄
  27.    */
  28.   onMousemove(evt) {
  29.     // TODO
  30.   },
  31.   /**
  32.    * 处理:click事件的回调
  33.    * @override
  34.    * @param  {Object} evt 事件句柄
  35.    */
  36.   onEdgeClick(evt) {
  37.     // TODO
  38.   },
  39. });

G6.registerLayout(layoutName, layout)

当内置布局不满足需求时，可以通过 G6.registerLayout(layoutName, layout) 方法自定义布局。

参数

名称类型是否必选描述
layoutNamestringtrue自定义布局名称
layoutobjecttrue自定义布局的配置项，配置项中包括的方法及作用具体请参考：Layout 文档。

用法

  1. G6.registerLayout('layoutName', {
  2.   /**
  3.    * 定义自定义行为的默认参数，会与用户传入的参数进行合并
  4.    */
  5.   getDefaultCfg() {
  6.     return {};
  7.   },
  8.   /**
  9.    * 初始化
  10.    * @param {object} data 数据
  11.    */
  12.   init(data) {
  13.     const self = this;
  14.     self.nodes = data.nodes;
  15.     self.edges = data.edges;
  16.   },
  17.   /**
  18.    * 执行布局
  19.    */
  20.   execute() {
  21.     // TODO
  22.   },
  23.   /**
  24.    * 根据传入的数据进行布局
  25.    * @param {object} data 数据
  26.    */
  27.   layout(data) {
  28.     const self = this;
  29.     self.init(data);
  30.     self.execute();
  31.   },
  32.   /**
  33.    * 更新布局配置，但不执行布局
  34.    * @param {object} cfg 需要更新的配置项
  35.    */
  36.   updateCfg(cfg) {
  37.     const self = this;
  38.     Util.mix(self, cfg);
  39.   },
  40.   /**
  41.    * 销毁
  42.    */
  43.   destroy() {
  44.     const self = this;
  45.     self.positions = null;
  46.     self.nodes = null;
  47.     self.edges = null;
  48.     self.destroyed = true;
  49.   },
  50. });