插件与工具

为辅助用户在图上探索，G6 提供了一些辅助工具，其中一部分是插件工具，另一部分是交互工具。

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

插件

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

Minimap

缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具，可作为导航辅助用户探索大规模图。 插件与工具 - 图1 现在，我们为 Tutorial案例 配置一个 Minimap：

预期效果 插件与工具 - 图2 使用方法

Minimap 是 G6 的插件之一，G6 的插件是一个个独立的包，需要单独引入：

  1. <body>
  2.   <!-- 引入 G6 -->
  3.   <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
  5.   <!-- 引入 Minimap -->
  6.   <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/minimap.js"></script>
  8.   <script>
  9.     // ...
  10.   </script>
  11. </body>

使用起来非常简单，实例化 Minimap 对象，并将其配置到图实例的插件列表里即可：

  1. // 实例化 minimap 插件
  2. const minimap = new Minimap({
  3.   size: [100, 100],
  4.   className: 'minimap',
  5.   type: 'delegate',
  6. });
  8. // 实例化图
  9. const graph = new G6.Graph({
  10.   // ...                           // 其他配置项
  11.   plugins: [minimap], // 将 minimap 实例配置到图上
  12. });

Grid 网格

网格可用于辅助用户在拖拽节点时对齐到网格。

期待效果 插件与工具 - 图3 使用方法首先引入插件

  1. <body>
  2.   <!-- 引入 G6 -->
  3.   <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
  5.   <!-- 引入 Minimap -->
  6.   <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/minimap.js"></script>
  8.   <!-- 引入 Grid -->
  9.   <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/grid.js"></script>
  11.   <script>
  12.     // ...
  13.   </script>
  14. </body>

实例化插件和配置插件到图上：

  1. // const minimap = ...
  3. // 实例化 grid 插件
  4. const grid = new Grid();
  6. // 实例化图
  7. const graph = new G6.Graph({
  8.   // ...                        // 其他配置项
  9.   plugins: [minimap, grid], // 将 grid 实例配置到图上
  10. });

交互工具

交互工具是指配置到图上交互模式中的工具。使用交互工具时，有两个步骤： Step 1: 在实例化图时配置 modes； Step 2: 为交互工具定义样式。

tooltip 节点提示框

节点提示框可以用在节点的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。

预期效果 插件与工具 - 图4 使用方法

实例化图时配置 'tooltip' 到 modes 中：

  1. const graph = new G6.Graph({
  2.   modes: {
  3.     default: [
  4.       // ...
  5.       {
  6.         type: 'tooltip', // 提示框
  7.         formatText(model) {
  8.           // 提示框文本内容
  9.           const text = 'label: ' + model.label + '<br/> class: ' + model.class;
  10.           return text;
  11.         },
  12.       },
  13.     ],
  14.   },
  15. });

由于 tooltip 实际上是一个悬浮的 <div> 标签，因此可在 HTML 的 <style> 标签或 CSS 中设置样式。下面展示在 HTML 中设置样式：

  1. <head>
  2.   <meta charset="UTF-8" />
  3.   <title>Tutorial Demo</title>
  5.   <style>
  6.     /* 提示框的样式 */
  7.     .g6-tooltip {
  8.       border: 1px solid #e2e2e2;
  9.       border-radius: 4px;
  10.       font-size: 12px;
  11.       color: #545454;
  12.       background-color: rgba(255, 255, 255, 0.9);
  13.       padding: 10px 8px;
  14.       box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  15.     }
  16.   </style>
  17. </head>

edge-tooltip 边提示框

节点提示框可以用在节点的详细信息的展示。当鼠标滑过边时，显示一个浮层告知边的详细信息。预期效果 插件与工具 - 图5 使用方法

  1. const graph = new G6.Graph({
  2.   modes: {
  3.     default: [
  4.       // ...
  5.       {
  6.         type: 'tooltip', // 节点提示框
  7.         // ...
  8.       },
  9.       {
  10.         type: 'edge-tooltip', // 边提示框
  11.         formatText(model) {
  12.           // 边提示框文本内容
  13.           const text =
  14.             'source: ' +
  15.             model.source +
  16.             '<br/> target: ' +
  17.             model.target +
  18.             '<br/> weight: ' +
  19.             model.weight;
  20.           return text;
  21.         },
  22.       },
  23.     ],
  24.   },
  25. });

与 tooltip 相同，edge-tooltip 是一个悬浮的 <div> 标签，可以使用与 tooltip 相同的方法设置其悬浮框的样式。

完整代码

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

⚠️注意 若需更换数据，请替换 'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json&#39; 为新的数据文件地址。