fix(scatter): 散点图刷选交互之后的 scale 处理

depends on: antvis/G2#3485
antvis · Jun 19, 2021 · e68ac8f · e68ac8f
1 parent dd23da5
commit e68ac8f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 27 deletions.
diff --git a/src/plots/scatter/adaptor.ts b/src/plots/scatter/adaptor.ts
@@ -1,4 +1,4 @@
-import { isNumber } from '@antv/util';
+import { isNumber, min, max } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow, deepAssign } from '../../utils';
 import { point } from '../../adaptor/geometries';
@@ -8,18 +8,36 @@ import { getQuadrantDefaultConfig, getPath, getMeta } from './util';
 import { ScatterOptions } from './types';
 
 /**
- * 散点图 data.length === 1 时居中显示，
+ * 散点图默认美观
+ * ① data.length === 1 ② 所有数据 y 值相等 ③ 所有数据 x 值相等
  * @param params
  * @returns params
  */
 export function transformOptions(options: ScatterOptions): ScatterOptions {
-  const { data = [] } = options;
-  // 仅对 data.length === 1 的情况进行处理
-  if (data.length === 1) {
-    return deepAssign({}, options, {
-      meta: getMeta(options),
-    });
+  const { data = [], xField, yField } = options;
+
+  if (data.length) {
+    const xValues = data.map((d) => d[xField]);
+    const minX = min(xValues);
+    const maxX = max(xValues);
+    const yValues = data.map((d) => d[yField]);
+    const minY = min(yValues);
+    const maxY = max(yValues);
+    if (minX === maxX && minY === maxY) {
+      return deepAssign({}, options, {
+        meta: getMeta(options, ['x', 'y']),
+      });
+    } else if (minX === maxX) {
+      return deepAssign({}, options, {
+        meta: getMeta(options, ['x']),
+      });
+    } else if (minY === maxY) {
+      return deepAssign({}, options, {
+        meta: getMeta(options, ['y']),
+      });
+    }
   }
+
   return options;
 }
 
@@ -84,14 +102,9 @@ function geometry(params: Params<ScatterOptions>): Params<ScatterOptions> {
  */
 export function meta(params: Params<ScatterOptions>): Params<ScatterOptions> {
   const { options } = params;
-  const { data, xAxis, yAxis, xField, yField } = options;
-
-  let newOptions = options;
-  // 仅对 data.length === 1 的情况进行处理
-  if (data.length === 1) {
-    newOptions = transformOptions(deepAssign({}, options, { meta: getMeta(options) }));
-  }
+  const { xAxis, yAxis, xField, yField } = options;
 
+  const newOptions = transformOptions(options);
   return flow(
     scale({
       [xField]: xAxis,

diff --git a/src/plots/scatter/index.ts b/src/plots/scatter/index.ts
@@ -1,3 +1,4 @@
+import { BRUSH_FILTER_EVENTS } from '@antv/g2';
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { deepAssign } from '../../utils';
@@ -20,6 +21,22 @@ export class Scatter extends Plot<ScatterOptions> {
   /** 图表类型 */
   public type: string = 'point';
 
+  constructor(container: string | HTMLElement, options: ScatterOptions) {
+    super(container, options);
+
+    // 监听 brush 事件，处理 meta
+    this.on(BRUSH_FILTER_EVENTS.BEFORE_FILTER_RENDER, () => {
+      const filteredData = this.chart.filterData(this.chart.getData());
+      const { options, chart } = this;
+      meta({ chart, options: { ...options, data: filteredData } });
+    });
+    this.on(BRUSH_FILTER_EVENTS.BEFORE_RESET_RENDER, () => {
+      // 运行时，读取 option
+      const { options, chart } = this;
+      meta({ chart, options });
+    });
+  }
+
   /**
    * @override
    * @param data

diff --git a/src/plots/scatter/util.ts b/src/plots/scatter/util.ts
@@ -162,8 +162,15 @@ export const getPath = (config: RenderOptions) => {
   return splinePath(pathData, config);
 };
 
-// 散点图data.length === 1时调整 meta: {min, max}
-export const getMeta = (options: ScatterOptions): ScatterOptions['meta'] => {
+/**
+ * 调整散点图 meta: { min, max } ① data.length === 1 ② 所有数据 y 值相等 ③ 所有数据 x 值相等
+ * @param options
+ * @returns
+ */
+export const getMeta = (
+  options: Pick<ScatterOptions, 'meta' | 'xField' | 'yField' | 'data'>,
+  dims: string[] = ['x', 'y']
+): ScatterOptions['meta'] => {
   const { meta = {}, xField, yField, data } = options;
   const xFieldValue = data[0][xField];
   const yFieldValue = data[0][yField];
@@ -190,15 +197,19 @@ export const getMeta = (options: ScatterOptions): ScatterOptions['meta'] => {
   };
   return {
     ...meta,
-    [xField]: {
-      ...meta[xField],
-      min: getValue(xField, 'min', 'x'),
-      max: getValue(xField, 'max', 'x'),
-    },
-    [yField]: {
-      ...meta[yField],
-      min: getValue(yField, 'min', 'y'),
-      max: getValue(yField, 'max', 'y'),
-    },
+    [xField]: dims.includes('x')
+      ? {
+          ...meta[xField],
+          min: getValue(xField, 'min', 'x'),
+          max: getValue(xField, 'max', 'x'),
+        }
+      : {},
+    [yField]: dims.includes('y')
+      ? {
+          ...meta[yField],
+          min: getValue(yField, 'min', 'y'),
+          max: getValue(yField, 'max', 'y'),
+        }
+      : {},
   };
 };