简介

plugins.tool.fisheye 作为 G6 的一个插件，提供了图在交互探索过程中的放缩辅助工具。线性放缩的缺陷在于，它会使得部分图超出屏幕边界，导致观测的连续性、上下文丢失。而 fisheye 是不同于传统线性放缩的一种 focus + context 放缩方式，通过对图进行一定的变形，从而解决了上述线性放缩存在的问题。鱼眼放大镜 plugins.tool.fisheye - 图1

目前，fisheye 的算法有很多，流行的有 Graphical Fisheye [链接]，Hyperbolic Fisheye [链接]，和 iSphere [链接]等。在 G6 中，我们实现了 Graphical Fisheye

原文信息：

Graphical Fisheye Views

鱼眼放大镜 plugins.tool.fisheye - 图2

作者信息：

  1. Mano jit Sarkar
  2. Marc H. Brown
  4. Department of Computer Science
  5. Brown University
  6. Providence, Rhode Island 02912

安装

在 HTML 中引用文件：

  1. <script src="https://unpkg.com/@antv/g6/build/plugin.tool.fisheye.js"></script>

或在 npm 中引用：

  1. import '@antv/g6/build/plugin.tool.fisheye';

参数

参数 说明 类型 默认值
radius 以鼠标当前位置为中心的鱼眼放大镜的半径。radius 越大，则被放大的范围越广。 number 200
d 放大系数。d 越大，放大效果越明显。 number 1

使用

实例化插件对象：

  1. const FisheyePlugin = G6.Plugins['tool.fisheye'];
  2. const fisheye = new FisheyePlugin({
  3.     radius: 300,
  4.     d:1.5
  5. });

在实例化 Graph 时作为插件插入：

  1. const graph = new G6.Graph({
  2.       container: 'mountNode',
  3.       plugins: [ fisheye ]
  4.     });

也可以使用以下方式将插件绑定到 graph 上：

  1. graph.addPlugin(fisheye);