{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-29320b868621575f8ae3188dbae7b2e1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

G6 除了提供丰富的 内置交互行为 Behavior 外，还提供了自定义交互行为的机制，方便用户开发更加定制化的交互行为。

\n

在交互行为上， G6 主要考虑了三个场景：

\n\n

在这些场景中只要用户可能无法一眼看清楚所有需要的信息，都需要进行交互，例如：

\n\n

我们无法将所有常用的交互全部内置到 G6 中。由于场景不一样，业务不一样，同样的目的需要的交互都不一样：

\n\n

我们可以看到在图上的交互是繁杂多变的。各种冲突、各种配置项会让用户和开发者疲于应对。出于这些考虑， G6 提供了一套非常简单而灵活的机制来实现交互。

\n

Behavior 的生命周期

\n

为实现交互，首先需要了解交互的生命周期。交互起源于用户在系统上的所有事件，是否允许交互发生同事件密切相关。所以我们看到交互的生命周期，即操作事件的过程如下：

\n\n

自定义交互 registerBehavior

\n

通过 G6.registerBehavior 自定义 Behavior。下面代码实现了名为 'activate-node'的交互行为，在终端用户点击节点时，置该节点的 active 状态为 true；再次点击或点击画布时，置该节点的 active 状态为 false。

\n

  注意：

\n\n

使用自定义的 Behavior

\n

有了上面代码定义的名为 'activate-node' 的 Behavior 以后，在实例化 Graph 时，在 modes 中将其配置到默认或其他行为模式中。下面代码将其配置到了默认行为模式中，在默认模式下，该行为将会生效。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n  modes: {\n    // 定义的 behavior 指定到这里，就可以支持Behavior中定义的交互\n    default: ['activate-node'],\n  },\n});\n
"}