performance: optimize the process of data.

src/animation/group-action.js

@@ -3,6 +3,7 @@
  * @author sima.zhang
  */
 const Util = require('./util');
+const Helper = require('../util/helper');
 const { Shape } = require('../graphic/index');
 
 function _groupScaleIn(container, animateCfg, coord, zeroY, type) {
@@ -91,14 +92,31 @@ function shapesScaleInXY(container, animateCfg) {
 }
 
 function groupWaveIn(container, animateCfg, coord) {
-  const clip = Util.getClip(coord);
+  const clip = Helper.getClip(coord);
   clip.set('canvas', container.get('canvas'));
   container.attr('clip', clip);
   const onEnd = function() {
     container.attr('clip', null);
     clip.remove(true);
   };
-  Util.doAnimation(clip, clip.endState, animateCfg, onEnd);
+  const endState = {};
+  if (coord.isPolar) {
+    const { startAngle, endAngle } = coord;
+    endState.endAngle = endAngle;
+    clip.attr('endAngle', startAngle);
+  } else {
+    const { start, end } = coord;
+    const width = Math.abs(start.x - end.x);
+    const height = Math.abs(start.y - end.y);
+    if (coord.isTransposed) {
+      clip.attr('height', 0);
+      endState.height = height;
+    } else {
+      clip.attr('width', 0);
+      endState.width = width;
+    }
+  }
+  Util.doAnimation(clip, endState, animateCfg, onEnd);
 }
 
 module.exports = {

src/animation/util.js

@@ -1,7 +1,7 @@
 /**
  * 动画工具
  */
-const { Shape, Matrix } = require('../graphic/index');
+const { Matrix } = require('../graphic/index');
 const Util = require('../util/common');
 
 const Helpers = {
@@ -90,48 +90,6 @@ const Helpers = {
         callback();
       });
     }
-  },
-  getClip(coord) {
-    const { start, end, width, height } = Helpers.getCoordInfo(coord);
-    let clip;
-
-    if (coord.isPolar) {
-      const { circleRadius, center, startAngle, endAngle } = coord;
-      clip = new Shape.Sector({
-        attrs: {
-          x: center.x,
-          y: center.y,
-          r: circleRadius,
-          r0: 0,
-          startAngle,
-          endAngle: startAngle
-        }
-      });
-      clip.endState = {
-        endAngle
-      };
-    } else {
-      clip = new Shape.Rect({
-        attrs: {
-          x: start.x,
-          y: end.y,
-          width: coord.isTransposed ? width : 0,
-          height: coord.isTransposed ? 0 : height
-        }
-      });
-
-      if (coord.isTransposed) {
-        clip.endState = {
-          height
-        };
-      } else {
-        clip.endState = {
-          width
-        };
-      }
-    }
-    clip.isClip = true;
-    return clip;
   }
 };
 

src/chart/chart.js

@@ -7,6 +7,7 @@ const ScaleController = require('./controller/scale');
 const AxisController = require('./controller/axis');
 const Global = require('../global');
 const { Canvas } = require('../graphic/index');
+const Helper = require('../util/helper');
 const TimeUtil = require('@antv/scale/lib/time-util');
 
 function isFullCircle(coord) {
@@ -277,36 +278,31 @@ class Chart extends Base {
     this.get('axisController') && this.get('axisController').clear();
   }
 
-  _execFilter(data) {
-    const filters = this.get('filters');
-    if (filters) {
-      data = data.filter(function(obj) {
-        let rst = true;
-        Util.each(filters, function(fn, k) {
-          if (fn) {
-            rst = fn(obj[k], obj);
-            if (!rst) {
-              return false;
-            }
-          }
-        });
-        return rst;
-      });
-    }
-    return data;
-  }
-
-  _initGeoms(geoms) {
-    const coord = this.get('coord');
-    const data = this.get('filteredData');
+  _filterDataOutOfRange(data) {
+    // 优化绘制性能，过滤不再列定义范围内的数据，为了体验，area line path 图表例外
     const colDefs = this.get('colDefs');
+    if (!colDefs) return data;
+
+    const geoms = this.get('geoms');
+    let isSpecialGeom = false;
+    Util.each(geoms, geom => {
+      if ([ 'area', 'line', 'path' ].indexOf(geom.get('type')) !== -1) {
+        isSpecialGeom = true;
+        return false;
+      }
+    });
 
     const fields = [];
     Util.each(colDefs, (def, key) => {
-      if (def && (def.values || def.min || def.max)) {
+      if (!isSpecialGeom && def && (def.values || def.min || def.max)) {
         fields.push(key);
       }
     });
+
+    if (fields.length === 0) {
+      return data;
+    }
+
     const geomData = [];
     Util.each(data, obj => {
       let flag = true;
@@ -333,9 +329,37 @@ class Chart extends Base {
       }
     });
 
+    return geomData;
+  }
+
+  _execFilter(data) {
+    data = this._filterDataOutOfRange(data);
+    const filters = this.get('filters');
+    if (filters) {
+      data = data.filter(function(obj) {
+        let rst = true;
+        Util.each(filters, function(fn, k) {
+          if (fn) {
+            rst = fn(obj[k], obj);
+            if (!rst) {
+              return false;
+            }
+          }
+        });
+        return rst;
+      });
+    }
+    return data;
+  }
+
+  _initGeoms(geoms) {
+    const coord = this.get('coord');
+    const data = this.get('filteredData');
+    const colDefs = this.get('colDefs');
+
     for (let i = 0, length = geoms.length; i < length; i++) {
       const geom = geoms[i];
-      geom.set('data', geomData);
+      geom.set('data', data);
       geom.set('coord', coord);
       geom.set('colDefs', colDefs);
       geom.init();
@@ -415,14 +439,6 @@ class Chart extends Base {
     }));
   }
 
-  // initColDefs() {
-  //   const colDefs = this.get('colDefs');
-  //   if (colDefs) {
-  //     const scaleController = this.get('scaleController');
-  //     Util.mix(scaleController.defs, colDefs);
-  //   }
-  // }
-
   _init() {
     const self = this;
     self._initCanvas();
@@ -555,6 +571,15 @@ class Chart extends Base {
     Chart.plugins.notify(self, 'beforeGeomDraw');
     self._renderAxis();
 
+    // 将 geom 限制在绘图区域内
+    if (self.get('limitInPlot')) {
+      const middlePlot = self.get('middlePlot');
+      const coord = self.get('coord');
+      const clip = Helper.getClip(coord);
+      clip.set('canvas', middlePlot.get('canvas'));
+      middlePlot.attr('clip', clip);
+    }
+
     // 绘制 geom
     for (let i = 0, length = geoms.length; i < length; i++) {
       const geom = geoms[i];

src/chart/controller/scale.js

@@ -32,7 +32,10 @@ class ScaleController {
     return def;
   }
 
-  _getDefaultType(field, data) {
+  _getDefaultType(field, data, def) {
+    if (def && def.type) {
+      return def.type;
+    }
     let type = 'linear';
     let value = Util.Array.firstValue(data, field);
     if (Util.isArray(value)) {
@@ -44,18 +47,27 @@ class ScaleController {
     return type;
   }
 
-  _getScaleCfg(type, field, data) {
+  _getScaleCfg(type, field, data, def) {
+    let values;
+    if (def && def.values) {
+      values = def.values;
+    } else {
+      values = Util.Array.values(data, field);
+    }
     const cfg = {
-      field
+      field,
+      values
     };
-    const values = Util.Array.values(data, field);
-    cfg.values = values;
+
     if (type !== 'cat' && type !== 'timeCat') {
-      const { min, max } = Util.Array.getRange(values);
-      cfg.min = min;
-      cfg.max = max;
-      cfg.nice = true; // 默认数值类型 linear 开启 nice
+      if (!def || !(def.min && def.max)) {
+        const { min, max } = Util.Array.getRange(values);
+        cfg.min = min;
+        cfg.max = max;
+        cfg.nice = true; // 默认数值类型 linear 开启 nice
+      }
     }
+
     return cfg;
   }
 
@@ -89,15 +101,9 @@ class ScaleController {
         values: [ field ]
       });
     } else { // 如果已经定义过这个度量
-      let type;
-      if (def) {
-        type = def.type;
-      }
-      type = type || self._getDefaultType(field, data);
-      const cfg = self._getScaleCfg(type, field, data);
-      if (def) {
-        Util.mix(cfg, def);
-      }
+      const type = self._getDefaultType(field, data, def);
+      const cfg = self._getScaleCfg(type, field, data, def);
+      def && Util.mix(cfg, def);
       scale = new Scale[SCALE_TYPES_MAP[type]](cfg);
     }
     return scale;

src/util/helper.js

@@ -1,4 +1,36 @@
+const { Shape } = require('../graphic/index');
 module.exports = {
+  getClip(coord) {
+    const start = coord.start;
+    const end = coord.end;
+    const width = end.x - start.x;
+    const height = Math.abs(end.y - start.y);
+    let clip;
+    if (coord.isPolar) {
+      const { circleRadius, center, startAngle, endAngle } = coord;
+      clip = new Shape.Sector({
+        attrs: {
+          x: center.x,
+          y: center.y,
+          r: circleRadius,
+          r0: 0,
+          startAngle,
+          endAngle
+        }
+      });
+    } else {
+      clip = new Shape.Rect({
+        attrs: {
+          x: start.x,
+          y: end.y,
+          width,
+          height
+        }
+      });
+    }
+    clip.isClip = true;
+    return clip;
+  },
   isPointInPlot(point, plot) {
     const { x, y } = point;
     const { tl, tr, br } = plot;