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

什么是 Behavior

\n

Behavior 是 G6 提供的定义图上交互事件的机制。它与交互模式 Mode 搭配使用，如何将下文所述各种 Behavior 配置到图上，见 交互模式。

\n

内置 Behavior

\n

理论上说 G6 上的所有基础图形、Item（节点/边）都能通过事件来进行操作，考虑到通用性， G6目前共提供了以下9个内置的 Behavior。

\n

drag-canvas

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['drag-canvas'],\n  },\n});\n
\n

默认配置下，可以在 x 和 y 两个方向上拖动画布。

\n

配置参数

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'drag-canvas',\n        direction: 'x',\n      },\n    ],\n  },\n});\n
\n

此时只能在 x 方向上面拖动，y 方向上不允许拖动。
\"3.gif\"

\n

zoom-canvas

\n\n

提示：若要限定缩放尺寸，请在 graph 上设置 **`minZoom` 和 `maxZoom`。**

\n

drag-node

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['drag-node'],\n  },\n});\n
\n

\"3.gif\"

\n

启用 delegate

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'drag-node',\n        enableDelegate: true,\n      },\n    ],\n  },\n});\n
\n

\"3.gif\"

\n

click-select

\n\n

默认配置
**

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['click-select'],\n  },\n});\n
\n

按住 Shift 键可多选。
\"3.gif\"

\n

配置参数

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'click-select',\n        trigger: 'ctrl',\n      },\n    ],\n  },\n});\n
\n

以上配置中，用户可按住 Ctrl 键进行多选，也可以配置 Alt 键。当配置了 multiple 参数为 false，则表示不允许多谢，此时 trigger 参数无效。

\n

tooltip

\n\n

提示：由于 G6 没有内置任何 tooltip 的样式，用户需要自己定义样式，例如：

\n
.g6-tooltip {\n  padding: 10px 6px;\n  color: #444;\n  background-color: rgba(255, 255, 255, 0.9);\n  border: 1px solid #e2e2e2;\n  border-radius: 4px;\n}\n
\n

edge-tooltip

\n

使用方式基本与 tooltip 相同，但是移到边时触发。主要是为了将两个交互区分开，以满足用户边与节点的提示样式或 HTML 结构不同，以及不需要在事件中去区分是节点事件还是边事件等。

\n\n

activate-relations

\n\n


默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['activate-relations'],\n  },\n});\n
\n

默认情况下，选中的节点状态，在操作完以后仍然会保持选中状态。
\"3.gif\"

\n

配置参数

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'activate-relations',\n        resetSelected: true,\n      },\n    ],\n  },\n});\n
\n

配置 resetSelected 参数为 true 后，交互后会重置节点的选择状态。

\n

\"3.gif\"

\n

brush-select

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['brush-select'],\n  },\n});\n
\n

默认情况下，按住 Shift 键进行框选，选中节点的同时，也会选中边。
\"3.gif\"

\n

配置参数

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'brush-select',\n        trigger: 'ctrl',\n        includeEdges: false,\n      },\n    ],\n  },\n});\n
\n

上面的配置，按住 Ctrl 键，进行框选，框选过程中不会选中边。
\"3.gif\"

\n

配置冲突

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      'drag-canvas',\n      {\n        type: 'brush-select',\n        trigger: 'drag',\n      },\n    ],\n  },\n});\n
\n

当用户配置 brush-select 的 trigger 为 drag，同时又配置了 drag-canvas 时，在交互上面会出现冲突的情况。
\"3.gif\"

\n

可以看到，在拖动过程中也出现了框选的情况，这种情况很显然不是我们期望的效果，除过使用 brush-select的 trigger 参数避免这种冲突外，我们还可以通过下面的方式来实现：

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['drag-canvas'],\n    brush: [\n      {\n        type: 'brush-select',\n        trigger: 'drag',\n      },\n    ],\n  },\n});\n
\n

上面这种方式是使用不同的 mode 来区分，mode 可以达到使用相同交互动作而产生不同的效果，更多关于 mode 的内容请参数 G6 中的 Mode 文档。

\n

使用 mode 区分，默认情况下使用的是 drag-canvas，但用户需要切换到框选时，通过 graph.setModel('brush') 即可实现，此时同样的交互产生的就是框选的效果。

\n

collapse-expand

\n\n

用法

\n
const graph = new G6.TreeGraph({\n  modes: {\n    default: [\n      {\n        type: 'collapse-expand',\n        trigger: 'click',\n        onChange(item, collapsed) {\n          const data = item.get('model').data;\n          data.collapsed = collapsed;\n          return true;\n        },\n      },\n      'drag-canvas',\n      'zoom-canvas',\n    ],\n  },\n});\n
\n

collapse-expand-group

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['collapse-expand-group'],\n  },\n});\n
\n

配置参数
配置 trigger 参数为 click 后，单击节点分组即可收起或展开分组。

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'collapse-expand-group',\n        trigger: 'click',\n      },\n    ],\n  },\n});\n
\n

\"3.gif\"

\n

drag-group

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['drag-group'],\n  },\n});\n
\n

drag-node-with-group

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['drag-node-with-group'],\n  },\n});\n
"}