---
title: 插件与工具
order: 5
---
本文将为 **Tutorial 案例** 添加缩略图插件、节点提示框。
使用插件时,有三个步骤:
Step 1: 引入插件;
Step 2: 注册插件;
Step 3: 在实例化图时将插件的实例配置到图上。
## Minimap
缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具,可作为导航辅助用户探索大规模图。
现在,我们为 **Tutorial 案例** 配置一个 Minimap:
**预期效果**
**使用方法**
Minimap 是 G6 的提供的插件之一,但未提前注册,需要从 Extensions 引入并注册后,再配置到图上:
```javascript
cosnt { Graph as GraphBase, extend, Extensions } = G6;
const ExtGraph = extend(GraphBase, {
// ... 其他扩展的注册
// 插件注册
plugins: {
minimap: Extensions.Minimap,
}
});
// 实例化图,注意这里使用的是 extend 后的 Graph
const graph = new Graph({
// ... // 其他配置项
plugins: [
// 若使用默认配置,可以只写一个字符串 'minimap'
{
type: 'minimap',
// ... 其他配置项
}
],
});
```
## tooltip 节点提示框
节点提示框可以用在边的详细信息的展示。当鼠标滑过节点时,显示一个浮层告知节点的详细信息。更多配置参见 [Tooltip 插件](https://g6-next.antv.antgroup.com/apis/interfaces/plugins/tooltip-config)。
**预期效果**
**使用方法**
Tooltip 是 G6 的提供的插件之一,但未提前注册,需要从 Extensions 引入并注册后,再配置到图上:
```javascript
cosnt { Graph as GraphBase, extend, Extensions } = G6;
const ExtGraph = extend(GraphBase, {
// ... 其他扩展的注册
// 插件注册
plugins: {
minimap: Extensions.Minimap,
tooltip: Extensions.Tooltip,
}
});
// 实例化图,注意这里使用的是 extend 后的 Graph
const graph = new Graph({
// ... // 其他配置项
plugins: [
// 若使用默认配置,可以只写一个字符串 'minimap'
'minimap',,
// 若使用默认配置,可以只写一个字符串 'tooltip'
{
type: "tooltip",
key: "my-tooltip", // 唯一标志
itemTypes: ["node"], // 只对节点生效,可以配置为 ['node', 'edge'] 使其同时对边生效
getContent: (e) => { // 自定义内容
const model = graph.getNodeData(e.itemId);
return `ID: ${e.itemId}
Degree: ${model.data.degree}`;
}
// ... 其他配置项
},
],
});
```
## 完整代码
至此,**Tutorial 案例** 完成,完整代码见:Tutorial 案例代码。
**⚠️ 注意:**
若需更换数据,请替换 `'https://raw.githubusercontent.com/antvis/G6/v5-demo-refine/packages/g6/tests/datasets/force-data.json'` 为新的数据文件地址。