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

title	order
插件与工具	5

本文将为 Tutorial 案例 添加缩略图插件、节点提示框。

使用插件时，有三个步骤：
  Step 1: 引入插件；
  Step 2: 注册插件；
  Step 3: 在实例化图时将插件的实例配置到图上。

Minimap

缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具，可作为导航辅助用户探索大规模图。

现在，我们为 Tutorial 案例 配置一个 Minimap：

预期效果

使用方法

Minimap 是 G6 的提供的插件之一，但未提前注册，需要从 Extensions 引入并注册后，再配置到图上：

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 插件。

预期效果

使用方法

Tooltip 是 G6 的提供的插件之一，但未提前注册，需要从 Extensions 引入并注册后，再配置到图上：

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}<br/>Degree: ${model.data.degree}`;
      }
      // ... 其他配置项
    },
  ],
});

完整代码

至此，Tutorial 案例 完成，完整代码见：Tutorial 案例代码。

⚠️ 注意: 
若需更换数据，请替换  'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'  为新的数据文件地址。