现在，我们为 **Tutorial 案例** 配置一个 Minimap：
**预期效果**
**使用方法**
Minimap 是 G6 的插件之一，引入 G6 后可以直接使用。实例化 Minimap 对象，并将其配置到图实例的插件列表里即可：
```javascript
// 实例化 minimap 插件
const minimap = new G6.Minimap({
size: [100, 100],
className: 'minimap',
type: 'delegate',
});
// 实例化图
const graph = new G6.Graph({
// ... // 其他配置项
plugins: [minimap], // 将 minimap 实例配置到图上
});
```
### Image Minimap
由于 [Minimap](#minimap) 的原理是将主画布内容复制到 minimap 的画布上，在大数据量下可能会造成双倍的绘制效率成本。为缓解该问题，Image Minimap 采用另一种机制，根据提供的图片地址或 base64 字符串 `graphImg` 绘制 `
**使用方法**
实例化 Image Minimap 插件时，`graphImg` 是必要参数。建议在主画布更新时使用 `updateGraphImg(img)` 同步更新 minimap 图片，其中参数 `img` 是图片地址或 base64 文本。
```javascript
// 实例化 Image Minimap 插件
const imageMinimap = new G6.ImageMinimap({
width: 200,
graphImg: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eD7nT6tmYgAAAAAAAAAAAABkARQnAQ'
});
const graph = new G6.Graph({
//... 其他配置项
plugins: [imageMinimap], // 配置 imageMinimap 插件
});
graph.data(data);
graph.render()
... // 一些主画布更新操作
imageMinimap.updateGraphImg(img); // 使用新的图片（用户自己生成）替换 minimap 图片
```
### Grid 网格
网格可用于辅助用户在拖拽节点时对齐到网格。
**预期效果**
**使用方法** 实例化插件和配置插件到图上：
```javascript
// const minimap = ...
// 实例化 grid 插件
const grid = new G6.Grid();
// 实例化图
const graph = new G6.Graph({
// ... // 其他配置项
plugins: [minimap, grid], // 将 grid 实例配置到图上
});
```
## 交互工具
交互工具是指配置到图上交互模式中的工具。使用交互工具时，有两个步骤：
**使用方法**
```javascript
const graph = new G6.Graph({
modes: {
default: [
// ...
{
type: 'tooltip', // 节点提示框
// ...
},
{
type: 'edge-tooltip', // 边提示框
formatText(model) {
// 边提示框文本内容
const text =
'source: ' +
model.source +
'target: ' + model.target + '
weight: ' + model.weight; return text; }, }, ], }, }); ``` 与 tooltip 相同，edge-tooltip 是一个悬浮的 `
` 标签，可以使用与 tooltip 相同的方法设置其悬浮框的样式。
## 完整代码
至此，**Tutorial 案例** 完成，完整代码见：Tutorial 案例代码。
⚠️ 注意:
若需更换数据，请替换 `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` 为新的数据文件地址。
若需更换数据，请替换 `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` 为新的数据文件地址。