antv/g6 交互与事件及自定义Behavior

监听和绑定事件

在 G6 中，提供了直接的单机事件、还有监听时机的方法。可以监听画布、节点、边、以及各函数被调用的时机等：

1. 绑定事件

要绑定事件，首先需要获得图表实例（Graph 实例），然后使用 on 方法来绑定事件。
分为三类：全局事件、canvas事件、节点/边/combo事件；

graph.on(eventName, handler);
// 以点击事件为例
// 全局
graph.on('click', ev=>{
   
   });
// canvas事件
graph.on('canvas:click', ev=>{
   
   });
// 点边及combo事件
graph.on('node/edge/combo:click',ev=>{
   
   });

• eventName 是事件名称，可以是 G6 内置事件，也可以是自定义事件。
• handler 是事件处理程序，是一个函数，用于处理事件发生时的逻辑。

2. 内置事件

G6 提供了一些内置事件，用于处理图表的各种交互。例如一些常见的内置事件：

• 'node:click': 节点被点击时触发。
• 'node:mouseenter': 鼠标进入节点时触发。
• 'node:mouseleave': 鼠标离开节点时触发。
• 'edge:click': 边被点击时触发。
• 'edge:mouseenter': 鼠标进入边时触发。
• 'edge:mouseleave': 鼠标离开边时触发。
• 'canvas:click': 画布被点击时触发。
• 'canvas:mouseenter': 鼠标进入画布时触发。
• 'canvas:mouseleave': 鼠标离开画布时触发。
  这里只是列举其中几个

3. 事件处理程序

事件处理程序是一个函数，用于定义事件触发时的逻辑。它通常有两个参数：

• e: 事件对象，包含事件的详细信息。
• item: 与事件相关联的图元素，如节点或边。

下面是一个示例，演示如何绑定 'node:click' 事件和相应的处理程序：

graph.on('node:click', (e, item) => {
   
   
  // 在控制台中打印节点的 ID
  console.log('Node Clicked:', item.getModel().id);
});

4. 解绑事件

要解绑事件，你可以使用 off 方法。解绑事件的一般语法如下：

graph.off(eventName, handler);

• eventName 是要解绑的事件名称。
• handler 是要解绑的事件处理程序。

5. 时机监听

时机事件指渲染、视口变换、元素增删改、数据变换等时机。
比如下面例子绑定了渲染完成时机的监听，afterrender、afterlayout 一类事件必须在 graph.render() 或 graph.read() 之前绑定，方可监听到首次渲染、布局完成后的相关事件。

graph.on('afterrender', (ev) => {
   
   
  // ... do sth
});

内置行为Behavior

在 AntV G6 中，Behavior 是一种行为，它用于定义图表上的互动和交互行为。Behavior 允许你自定义鼠标交互、拖拽、缩放、选择等操作，以改变图表的状态和展示。G6目前提供了14个内置的Behavior。

G6 提供了一些内置的 Behavior，可以在创建图表实例时配置，例如：
AntV G6 提供了一些内置的行为（Behaviors），用于在图表中处理用户交互和操作。以下是 G6 内置的一些常见行为以及它们的作用：

1. drag-canvas: 允许用户拖拽整个画布。
2. zoom-canvas: 允许用户缩放画布。
3. drag-node: 允许用户拖拽节点。
4. drag-combo: 允许用户拖拽群组（Combo）。
5. collapse-expand-combo: 允许用户折叠/展开群组。
6. scroll-canvas: 滚轮滚动画布,v4.2.6 起支持。
7. click-select: 单击选中节点或边。
8. lasso-select: 使用 Lasso 工具框选节点或边。
9. brush-select: 使用 Brush 工具框选节点或边。
10. tooltip-edge: 使用方式基本与 tooltip 相同，但是移到边时触发。
11. tooltip: 节点文本提示。
12. activate-relations: 选中节点时，高亮相关的边。
13. shortcuts-call: 允许终端用户使用键盘组合键调用 Graph 的函数，例如按下键盘上的 control 与 1，对图进行适应画布。
14. collapse-expand: 只适用于树图，展开或收起子树。

使用：

const graph = new G6.Graph({
   
   
  container: 'container',
  width: 800,
  height