--- title: 插件与工具 order: 5 --- 本文将为 **Tutorial 案例** 添加缩略图插件、节点提示框。 使用插件时,有三个步骤:
  Step 1: 引入插件;
  Step 2: 注册插件;
  Step 3: 在实例化图时将插件的实例配置到图上。 ## Minimap 缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具,可作为导航辅助用户探索大规模图。 现在,我们为 **Tutorial 案例** 配置一个 Minimap: **预期效果** img **使用方法** 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)。 **预期效果** img **使用方法** 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'`  为新的数据文件地址。