G6 图形可视化库中的 CreateEdge 交互行为详解

概述

在 G6 图形可视化库中，CreateEdge 是一种内置的交互行为，它允许用户通过鼠标操作在画布上创建新的边（Edge）。这种交互方式特别适用于需要动态构建关系图的场景，如流程图编辑器、知识图谱构建工具等可视化应用。

核心功能

CreateEdge 交互行为主要实现以下功能：

1. 通过鼠标点击节点触发边的创建流程
2. 支持拖拽方式确定边的目标节点
3. 提供完整的创建过程事件回调
4. 可自定义边的样式和属性

使用场景

CreateEdge 交互行为适用于多种需要动态构建关系的场景：

1. 流程图设计：用户可以通过点击连接节点来构建流程逻辑
2. 关系图谱编辑：在知识图谱或社交网络分析中动态添加实体间关系
3. 拓扑图配置：网络拓扑结构的可视化配置工具
4. 数据建模工具：实体关系模型的图形化设计

配置参数详解

CreateEdge 提供了丰富的配置选项，开发者可以根据需求进行定制：

参数	描述	类型	默认值	必选
trigger	触发方式	'click' | 'drag'	'click'	否
edgeConfig	创建边的默认配置	Object	{}	否
shouldBegin	是否允许开始创建边	Function	() => true	否
shouldEnd	是否允许结束创建边	Function	() => true	否
onCreateEdge	创建边完成的回调	Function	-	否

复杂参数说明

edgeConfig：用于配置新创建边的默认属性，可以包含以下子属性：

• style：边的样式配置
• label：边的文本标签
• shape：边的图形类型
• 其他自定义属性

shouldBegin/shouldEnd：这两个函数参数接收事件对象作为参数，返回布尔值决定是否允许开始/结束边的创建过程。

实现原理

CreateEdge 交互行为的核心实现流程如下：

1. 监听阶段：注册鼠标事件监听器，等待用户操作
2. 触发阶段：用户点击源节点时触发创建流程
3. 拖拽阶段：显示临时边跟随鼠标移动
4. 确认阶段：用户释放鼠标时确定目标节点
5. 创建阶段：根据配置生成新边并添加到图中

最佳实践

在使用 CreateEdge 交互时，建议考虑以下实践：

1. 视觉反馈：为创建过程中的临时边设置明显不同的样式，提供良好的用户体验
2. 验证逻辑：利用 shouldBegin/shouldEnd 实现业务规则的校验
3. 性能优化：对于大型图，考虑限制同时创建的边数量
4. 异常处理：处理创建过程中可能出现的异常情况，如重复边等

示例代码

以下是一个完整的 CreateEdge 使用示例：

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  modes: {
    default: [
      {
        type: 'create-edge',
        trigger: 'click',
        edgeConfig: {
          style: {
            stroke: '#1890ff',
            lineWidth: 2,
          },
        },
        shouldBegin: (e) => {
          // 只允许从特定类型的节点开始创建边
          return e.target.cfg.type === 'start-node';
        },
        onCreateEdge: (edge) => {
          console.log('新边创建完成:', edge);
        },
      },
    ],
  },
});

注意事项

1. 确保图实例已正确初始化后再启用交互
2. 在销毁图实例前应移除相关事件监听
3. 对于复杂场景，考虑结合其他交互行为使用
4. 注意处理浏览器兼容性问题

通过合理配置和使用 CreateEdge 交互行为，开发者可以轻松实现强大的图形编辑功能，为用户提供直观的关系构建体验。