g6/packages/site/docs/manual/tutorial/behavior.zh.md

337 lines
12 KiB
Markdown
Raw Normal View History

2023-02-02 10:31:36 +08:00
---
title: 图的交互 Behavior
order: 4
---
2023-08-31 18:16:13 +08:00
G6 封装了一系列交互方法,方便用户直接使用。本文将为 **Tutorial 案例** 增加简单的交互:点击节点、点击边、框选节点、放缩画布、拖拽画布。本节目标效果如下:
2023-02-02 10:31:36 +08:00
2023-08-31 18:16:13 +08:00
<img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kgrxQJnxNPoAAAAAAAAAAAAADmJ7AQ/original' width=500 alt='img' />
2023-02-02 10:31:36 +08:00
> 图 1 Tutorial 案例的交互效果。
## 基本概念
### 交互行为 Behavior
G6 中的交互行为。G6 **内置**了一系列交互行为,用户可以直接使用。简单地理解,就是可以一键开启这些交互行为:
- `drag-canvas`:拖拽画布;
- `zoom-canvas`:缩放画布。
2023-08-31 18:16:13 +08:00
更多详见:[交互行为 Behavior](https://g6-next.antv.antgroup.com/apis/interfaces/behaviors/activate-relations-options)
2023-02-02 10:31:36 +08:00
### 交互管理 Mode
2023-08-31 18:16:13 +08:00
Mode 是 G6 交互行为的管理机制,一个 mode 是多种行为 Behavior 的组合,允许用户通过切换不同的模式进行交互行为的管理。由于该概念较为复杂,在本入门教程中,读者不需要对该机制深入理解。如有需求,参见 [交互模式 Mode](https://g6-next.antv.antgroup.com/apis/interfaces/graph/i-graph)。
2023-02-02 10:31:36 +08:00
### 交互状态 State
2023-08-31 18:16:13 +08:00
状态是 G6 中的状态机制。用户可以为图中的元素(节点/边设置不同的状态及不同状态下的样式。在状态发生变化时G6 自动更新元素的样式。例如,可以为节点设置状态 `'click'``true``false`,并为节点设置 `'click'` 的样式为加粗节点边框。当 `'click'` 状态被切换为 `true` 时,节点的边框将会被加粗,`'click'` 状态被切换为 `false` 时,节点的样式恢复到默认。在下面的使用方法中,将会有具体例子。
2023-02-02 10:31:36 +08:00
## 使用方法
2023-08-31 18:16:13 +08:00
### 拖拽、缩放 —— 内置的交互行为
2023-02-02 10:31:36 +08:00
2023-08-31 18:16:13 +08:00
在 G6 中使用内置 Behavior 的方式非常简单,只需要在图实例化时配置 `modes`。为了包体积管理,部分内置交互没有提前注册到 Graph 上,需要如下注册方式:
2023-02-02 10:31:36 +08:00
```javascript
const { Graph: BaseGraph, extend, Extensions } = G6;
2023-08-31 18:16:13 +08:00
const Graph = extend(BaseGraph, {
2023-08-31 18:16:13 +08:00
behaviors: {
// 框选节点事内置交互,未提前注册,需要从 Extensions 中引入后如下注册:
'brush-select': Extensions.BrushSelect,
},
});
```
所有的内置交互可以在 [交互行为 Behavior](https://g6-next.antv.antgroup.com/apis/interfaces/behaviors/activate-relations-options) 查看,除了下面这戏鹅已经提前注册的交互,其他需要使用上面方式进行注册。
```javascript
// 已提前注册的交互
{
'drag-canvas': DragCanvas, // 拖拽画布
'zoom-canvas': ZoomCanvas, // 缩放画布
'drag-node': DragNode, // 拖拽节点
'drag-combo': DragCombo, // 拖拽 Combo
'collapse-expand-combo': CollapseExpandCombo, // 展开/收起 Combo
'collapse-expand-tree': CollapseExpandTree, // 展开/收起子树
'click-select': ClickSelect, // 点击选择
}
```
```javascript
// 注意此处使用的是 exnted 返回的 Graph
2023-02-02 10:31:36 +08:00
const graph = new G6.Graph({
2023-08-31 18:16:13 +08:00
// ...其他配置项
2023-02-02 10:31:36 +08:00
modes: {
2023-08-31 18:16:13 +08:00
default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'click-select', 'brush-select'], // 允许拖拽画布、放缩画布、拖拽节点、点选节点、框选节点
2023-02-02 10:31:36 +08:00
},
});
```
2023-08-31 18:16:13 +08:00
除了直接使用内置交互名称外,也可以为 Behavior 配置参数,例如放缩画布的敏感度、最大/最小放缩程度等,具体用法参见  [交互行为 Behavior](https://g6-next.antv.antgroup.com/apis/interfaces/behaviors/zoom-canvas-options)。
2023-02-02 10:31:36 +08:00
上面代码中的 `modes` 定义了 G6 的模式,`default` 是默认的模式,还可以允许有其他的模式,比如:编辑模式 `edit` 等。不同的模式,用户能进行的行为可以不同,比如默认模式能拖拽画布,编辑模式不允许拖拽画布:
```javascript
// 举例解释不同模式
modes: {
default: ['drag-canvas'],
edit: []
}
```
2023-08-31 18:16:13 +08:00
### 定义交互状态样式
2023-02-02 10:31:36 +08:00
2023-08-31 18:16:13 +08:00
有时我们希望通过交互可以将元素样式变成特定样式,如我们看到的图 1 中,鼠标 hover 节点、点击节点、点击边时,样式发生了变化。这里涉及到了 G6 中状态的概念。简单地说,是否 `hover` 、`click` 、任何操作可以是自己起的状态名都可以称为一种状态state。用户可以自由设置不同状态下的元素样式。要达到交互更改元素样式需要两步
2023-02-02 10:31:36 +08:00
- Step 1: 设置各状态下的元素样式;
- Step 2: 监听事件并切换元素状态。
#### 设置各状态下的元素样式
2023-08-31 18:16:13 +08:00
在实例化图时,通过 `nodeState``edgeState` 两个配置项可以配置元素在不同状态下的样式。G6 预置了一些状态样式:'selected', 'highlight', 'active', 'inactive', 'disable'。在 'click-select' 和 'brush-select' 交互中默认触发的是节点和边的 'selected' 状态,因此在没有配置 `nodeState``edgeState` 的情况下,我们也可以看到有选中的状态样式响应。如果需要自定义状态样式,可以为 'click-select' 和 'brush-select' 配置 `selectedState` 为自定义的字符串,然后在图配置的 `nodeState``edgeState` 中配置对应的样式,例如:
2023-02-02 10:31:36 +08:00
```javascript
2023-08-31 18:16:13 +08:00
const graph = new Graph({
// ...其他配置项
// 节点状态样式
nodeState: {
// 自定义的状态名称
customstatename1: {
// 针对不同的图形进行配置
keyShape: {
lineWidth: 2,
stroke: 'red',
},
labelShape: {
fontWeight: 500,
},
2023-02-02 10:31:36 +08:00
},
2023-08-31 18:16:13 +08:00
// 自定义的状态名称
customstatename2: {
keyShape: {
lineDash: [2, 2],
lineWidth: 4,
stroke: 'blue',
},
2023-02-02 10:31:36 +08:00
},
},
2023-08-31 18:16:13 +08:00
// edgeState 同理
2023-02-02 10:31:36 +08:00
});
```
#### 监听事件并切换元素状态
2023-08-31 18:16:13 +08:00
除了内置的交互,您也可以在任意需要的使用调用 `graph.setItemState` 来设置元素的状态,例如在双击节点时:
2023-02-02 10:31:36 +08:00
```javascript
2023-08-31 18:16:13 +08:00
graph.on('node:dblclick', (e) => {
graph.setItemState(e.itemId, 'customstatename1', true);
});
graph.on('canvas:click', (e) => {
// 找到所有 customstatename1 状态下的节点 id
const stateNodeIds = graph.findIdByState('node', 'customstatename1', true);
// 批量取消状态
graph.setItemState(stateNodeIds, 'customstatename1', false);
2023-02-02 10:31:36 +08:00
});
```
2023-08-31 18:16:13 +08:00
G6 中所有元素监听都挂载在图实例上,如下代码中的 `graph` 对象是 G6.Graph 的实例,`graph.on()`  函数监听了某元素类型(`node` / `edge`)的某种事件(`click` / `mouseenter` / `mouseleave` / ...。
2023-02-02 10:31:36 +08:00
```javascript
2023-08-31 18:16:13 +08:00
// 在图实例 graph 上监听
graph.on('元素类型:事件名', (e) => {
// do something
2023-02-02 10:31:36 +08:00
});
```
## 完整代码
至此,完整代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tutorial Demo</title>
</head>
<body>
2023-08-31 18:16:13 +08:00
<div id="container"></div>
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/5.0.0-beta.21/dist/g6.min.js"></script>
2023-02-02 10:31:36 +08:00
<script>
const { Graph: BaseGraph, extend, Extensions } = G6;
2023-08-31 18:16:13 +08:00
// 自定义数据处理器 - 度数计算
const degreeCalculator = (data, options, userGraphCore) => {
const { edges, nodes } = data;
const degreeMap = new Map();
edges.forEach(({ source, target }) => {
degreeMap.set(source, (degreeMap.get(source) || 0) + 1);
degreeMap.set(target, (degreeMap.get(target) || 0) + 1);
});
nodes.forEach((node) => {
node.data.degree = degreeMap.get(node.id) || 0;
});
return data;
};
// 自定义数据处理器 - 节点聚类
const clusteringNodes = (data, options = {}, userGraphCore) => {
if (!Algorithm?.labelPropagation) return;
const clusteredData = Algorithm.louvain(data, false);
const clusterMap = new Map();
clusteredData.clusters.forEach((cluster, i) => {
cluster.nodes.forEach((node) => {
clusterMap.set(node.id, `c${i}`);
});
});
data.nodes.forEach((node) => {
node.data.cluster = clusterMap.get(node.id);
});
return data;
};
const Graph = extend(BaseGraph, {
transforms: {
'degree-calculator': degreeCalculator,
'node-clustering': clusteringNodes,
2023-02-02 10:31:36 +08:00
},
2023-08-31 18:16:13 +08:00
behaviors: {
'brush-select': Extensions.BrushSelect,
2023-02-02 10:31:36 +08:00
},
2023-08-31 18:16:13 +08:00
nodes: {
'triangle-node': Extensions.TriangleNode,
2023-02-02 10:31:36 +08:00
},
2023-08-31 18:16:13 +08:00
});
const graph = new Graph({
container: 'container',
width: 1000,
height: 1000,
transforms: [
'transform-v4-data',
'degree-calculator',
'node-clustering',
{
type: 'map-node-size',
field: 'degree',
range: [16, 60],
2023-02-02 10:31:36 +08:00
},
2023-08-31 18:16:13 +08:00
],
modes: {
default: ['drag-node', 'drag-canvas', 'zoom-canvas', 'click-select', 'brush-select'],
2023-02-02 10:31:36 +08:00
},
layout: {
type: 'force',
2023-08-31 18:16:13 +08:00
animated: true,
linkDistance: 50,
2023-02-02 10:31:36 +08:00
},
2023-08-31 18:16:13 +08:00
theme: {
type: 'spec',
base: 'light',
specification: {
node: {
dataTypeField: 'cluster',
},
},
},
node: (model) => {
const { id, data } = model;
let type = 'circle-node';
if (data.degree === 2) type = 'rect-node';
else if (data.degree === 1) type = 'triangle-node';
const badgeShapes = {
fontSize: 12,
lod: 0,
};
if (data.degree > 10) {
badgeShapes[0] = {
color: '#F86254',
text: 'Important',
position: 'rightTop',
};
}
if (data.degree > 5) {
badgeShapes[1] = {
text: 'A',
textAlign: 'center',
color: '#EDB74B',
position: 'right',
};
}
return {
id,
data: {
...data,
type,
labelShape: {
position: 'bottom',
text: id,
},
labelBackgroundShape: {},
iconShape:
data.degree <= 2
? undefined
: {
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
fill: '#fff',
lod: 0,
fontSize: data.keyShape.r - 4,
},
badgeShapes,
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
states: ['selected', 'active'],
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
states: ['selected', 'active'],
},
],
},
},
};
},
edge: {
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
states: ['selected', 'active'],
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
states: ['selected', 'active'],
},
],
},
2023-02-02 10:31:36 +08:00
},
});
const main = async () => {
const response = await fetch(
2023-09-01 00:13:08 +08:00
'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json',
2023-02-02 10:31:36 +08:00
);
const remoteData = await response.json();
2023-08-31 18:16:13 +08:00
graph.read(remoteData);
2023-02-02 10:31:36 +08:00
};
main();
</script>
</body>
</html>
```
2023-09-01 00:13:08 +08:00
**⚠️ 注意:** <br /> 若需更换数据,请替换  `'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'`  为新的数据文件地址。