Merge pull request #84 from ICMI/dev-f6

feat: 鱼眼优化

README.md

@@ -1,24 +1,16 @@
 # F6：移动端图可视化引擎
 
-![](https://gw.alipayobjects.com/mdn/rms_5c3b4a/afts/img/A*KV1pSIPeJPAAAAAAAAAAAAAAARQnAQ)
-[![travis-ci](https://img.shields.io/travis/antvis/f6.svg)](https://travis-ci.org/antvis/f6)
-[![codecov](https://codecov.io/gh/antvis/f6/branch/master/graph/badge.svg)](https://codecov.io/gh/antvis/f6) 
-![typescript](https://img.shields.io/badge/language-typescript-red.svg) 
-![MIT](https://img.shields.io/badge/license-MIT-000000.svg) 
-[![npm package](https://img.shields.io/npm/v/@antv/f6.svg)](https://www.npmjs.com/package/@antv/f6) 
-[![NPM downloads](http://img.shields.io/npm/dm/@antv/f6.svg)](https://npmjs.org/package/@antv/f6) 
-[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/f6.svg)](http://isitmaintained.com/project/antvis/f6 'Percentage of issues still open')
+![](https://gw.alipayobjects.com/mdn/rms_5c3b4a/afts/img/A*KV1pSIPeJPAAAAAAAAAAAAAAARQnAQ) [![travis-ci](https://img.shields.io/travis/antvis/f6.svg)](https://travis-ci.org/antvis/f6) [![codecov](https://codecov.io/gh/antvis/f6/branch/master/graph/badge.svg)](https://codecov.io/gh/antvis/f6) ![typescript](https://img.shields.io/badge/language-typescript-red.svg) ![MIT](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/f6.svg)](https://www.npmjs.com/package/@antv/f6) [![NPM downloads](http://img.shields.io/npm/dm/@antv/f6.svg)](https://npmjs.org/package/@antv/f6) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/f6.svg)](http://isitmaintained.com/project/antvis/f6 'Percentage of issues still open')
 
-[English](./README.en-US.md) | 简体中文
+[English](./README-en-US.md) | 简体中文
 
 ## 什么是 f6
 
 [F6](https://github.com/antvis/f6) 是一个移动端图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。
 
 <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zTjwQaXokeQAAAAAAAAAAABkARQnAQ' width=550 alt='' />
 
-基于 F6，用户可以快速搭建自己的 **图分析** 应用。 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*cDzXR4jIWr8AAAAAAAAAAABkARQnAQ)  
-
+基于 F6，用户可以快速搭建自己的 **图分析** 应用。 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*cDzXR4jIWr8AAAAAAAAAAABkARQnAQ)
 
 <!-- > 强大的动画及交互
 
@@ -132,8 +124,8 @@ Page({
     this.graph.emitEvent(e);
   },
   onUnload() {
-    this.graph?.destroy()
-  }
+    this.graph?.destroy();
+  },
 });
 ```
 

packages/plugin/src/fisheye/index.ts

@@ -1,4 +1,4 @@
-import { clone } from '@antv/util';
+import { clone, throttle } from '@antv/util';
 import { IG6GraphEvent, ShapeStyle, IAbstractGraph as IGraph } from '@antv/f6-core';
 import Base from '../base';
 
@@ -93,12 +93,14 @@ export default class Fisheye extends Base {
           y: lensDelegate.attr('y') - evt.y,
         });
       });
-      lensDelegate.on('drag', (evt) => {
-        self.magnify(evt);
+      const throMmagnify = throttle(self.magnify.bind(self), 100, {
+        leading: false,
+        trailing: false,
       });
+      lensDelegate.on('drag', throMmagnify);
 
       lensDelegate.on('dragend', (evt) => {
-        this.clear()
+        this.clear();
       });
 
       // 绑定调整范围（r）和缩放系数(d)的监听
@@ -377,7 +379,7 @@ export default class Fisheye extends Base {
     if (trigger === 'mousemove' || trigger === 'tap' || trigger === 'drag') {
       self.set('trigger', trigger);
     }
-    if (scaleDBy === 'drag'  || scaleDBy === 'unset') {
+    if (scaleDBy === 'drag' || scaleDBy === 'unset') {
       self.set('scaleDBy', scaleDBy);
       self.get('delegate').remove();
       self.get('delegate').destroy();
@@ -525,7 +527,7 @@ export default class Fisheye extends Base {
       dPercentText.remove();
       dPercentText.destroy();
     }
-    this.set('delegateCenterDiff', undefined)
+    this.set('delegateCenterDiff', undefined);
   }
 
   /**