G6 图可视化引擎——入门教程——插件与工具

最新推荐文章于 2024-06-25 19:01:03 发布

大风车滴呀滴溜溜地转

最新推荐文章于 2024-06-25 19:01:03 发布

阅读量2.8k

点赞数 2

分类专栏： # G6 图可视化引擎

本文链接：https://blog.csdn.net/weixin_43336281/article/details/106951900

版权

G6 图可视化引擎专栏收录该内容

23 篇文章 27 订阅

订阅专栏

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

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

插件

使用插件时，有三个步骤：

引入插件；
实例化插件；
在实例化图时将插件的实例配置到图上。

Minimap

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

在这里插入图片描述
现在，我们为 Tutorial 案例配置一个 Minimap：

预期效果
在这里插入图片描述
使用方法

Minimap 是 G6 的插件之一，引入 G6 后可以直接使用。实例化 Minimap 对象，并将其配置到图实例的插件列表里即可：

// 实例化 minimap 插件
const minimap = new G6.Minimap({
  size: [100, 100],
  className: 'minimap',
  type: 'delegate',
});

// 实例化图
const graph = new G6.Graph({
  // ...                           // 其他配置项
  plugins: [minimap], // 将 minimap 实例配置到图上
});

Grid 网格

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

预期效果

在这里插入图片描述

使用方法实例化插件和配置插件到图上：

// const minimap = ...

// 实例化 grid 插件
const grid = new G6.Grid();

// 实例化图
const graph = new G6.Graph({
  // ...                        // 其他配置项
  plugins: [minimap, grid], // 将 grid 实例配置到图上
});

交互工具

交互工具是指配置到图上交互模式中的工具。使用交互工具时，有两个步骤：

在实例化图时配置 modes；
为交互工具定义样式。

tooltip 节点提示框

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

预期效果

在这里插入图片描述

使用方法

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

const graph = new G6.Graph({
  modes: {
    default: [
      // ...
      {
        type: 'tooltip', // 提示框
        formatText(model) {
          // 提示框文本内容
          const text = 'label: ' + model.label + '<br/> class: ' + model.class;
          return text;
        },
      },
    ],
  },
});

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

<head>
  <meta charset="UTF-8" />
  <title>Tutorial Demo</title>

  <style>
    /* 提示框的样式 */
    .g6-tooltip {
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      font-size: 12px;
      color: #545454;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 10px 8px;
      box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    }
  </style>
</head>

edge-tooltip 边提示框

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

预期效果

在这里插入图片描述
使用方法

const graph = new G6.Graph({
  modes: {
    default: [
      // ...
      {
        type: 'tooltip', // 节点提示框
        // ...
      },
      {
        type: 'edge-tooltip', // 边提示框
        formatText(model) {
          // 边提示框文本内容
          const text =
            'source: ' +
            model.source +
            '<br/> target: ' +
            model.target +
            '<br/> weight: ' +
            model.weight;
          return text;
        },
      },
    ],
  },
});

与 tooltip 相同，edge-tooltip 是一个悬浮的

标签，可以使用与 tooltip 相同的方法设置其悬浮框的样式。

完整代码

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

大风车滴呀滴溜溜地转

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
G6 图可视化引擎——入门教程——插件与工具

为辅助用户在图上探索，G6 提供了一些辅助工具，其中一部分是插件工具，另一部分是交互工具。本文将为 Tutorial 案例添加缩略图插件、网格插件、节点提示框、边提示框。插件使用插件时，有三个步骤：引入插件；实例化插件；在实例化图时将插件的实例配置到图上。Minimap缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具，可作为导航辅助用户探索大规模图。现在，我们为 Tutorial 案例配置一个 Minimap：预期效果使用方法Minimap 是 G6 的
复制链接

扫一扫