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

__tests__/unit/plots/scatter/data-spec.ts

@@ -301,4 +301,41 @@ describe('scatter', () => {
 
     scatter.destroy();
   });
+
+  it('all yValues or xValues of data is equal', () => {
+    const data = [
+      { gender: 'female', height: 161.2, weight: 51.6 },
+      { gender: 'female', height: 111.2, weight: 51.6 },
+      { gender: 'female', height: 161.2, weight: 21.6 },
+    ];
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      xAxis: {
+        nice: false,
+      },
+      yAxis: {
+        nice: false,
+      },
+    });
+
+    scatter.render();
+    let yScale = scatter.chart.getScaleByField('height');
+    expect(yScale.max).not.toBe(161.2 * 2);
+
+    scatter.changeData([data[0], data[2]]);
+    yScale = scatter.chart.getScaleByField('height');
+    expect(yScale.min).toBe(0);
+    expect(yScale.max).toBe(161.2 * 2);
+
+    scatter.changeData([data[0], data[1]]);
+    const xScale = scatter.chart.getScaleByField('weight');
+    expect(xScale.max).toBe(51.6 * 2);
+
+    scatter.destroy();
+  });
 });

__tests__/unit/plots/scatter/size-spec.ts

@@ -3,6 +3,48 @@ import { data } from '../../../data/gender';
 import { createDiv } from '../../../utils/dom';
 
 describe('scatter', () => {
+  it('default', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      sizeField: 'gender',
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    let geometry = scatter.chart.geometries[0];
+
+    // @ts-ignore
+    expect(geometry.attributeOption.size.values.length).toBe(2);
+    // @ts-ignore
+    expect(geometry.attributeOption.size.values).toEqual([4, 4]);
+
+    // 不能设置 size 为 0（一定吗？可以后续斟酌下）
+    scatter.update({ size: 0 });
+    geometry = scatter.chart.geometries[0];
+    // @ts-ignore
+    expect(geometry.attributeOption.size.values).toEqual([2, 8]);
+
+    scatter.update({ size: [3, 9] });
+    geometry = scatter.chart.geometries[0];
+    // @ts-ignore
+    expect(geometry.attributeOption.size.values).toEqual([3, 9]);
+
+    scatter.update({ size: null });
+    geometry = scatter.chart.geometries[0];
+    // @ts-ignore
+    expect(geometry.attributeOption.size.values).toEqual([2, 8]);
+
+    scatter.destroy();
+  });
+
   it('size: number options', () => {
     const scatter = new Scatter(createDiv(), {
       width: 400,

__tests__/unit/plots/scatter/style-spec.ts

@@ -13,18 +13,23 @@ describe('scatter', () => {
       yField: 'height',
       sizeField: 'weight',
       size: [5, 10],
+      shape: 'cricle',
       xAxis: {
         nice: true,
       },
+    });
+
+    scatter.render();
+    expect(scatter.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FFFFFF');
+
+    scatter.update({
       pointStyle: {
         fill: 'red',
         stroke: 'yellow',
         opacity: 0.8,
       },
     });
 
-    scatter.render();
-
     const geometry = scatter.chart.geometries[0];
     const elements = geometry.elements;
 

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,

src/plots/scatter/index.ts

@@ -1,3 +1,4 @@
+import { BRUSH_FILTER_EVENTS, VIEW_LIFE_CIRCLE } from '@antv/g2';
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { deepAssign } from '../../utils';
@@ -20,6 +21,24 @@ export class Scatter extends Plot<ScatterOptions> {
   /** 图表类型 */
   public type: string = 'point';
 
+  constructor(container: string | HTMLElement, options: ScatterOptions) {
+    super(container, options);
+
+    // 监听 brush 事件，处理 meta
+    this.on(VIEW_LIFE_CIRCLE.BEFORE_RENDER, (evt) => {
+      // 运行时，读取 option
+      const { options, chart } = this;
+      if (evt.data?.source === BRUSH_FILTER_EVENTS.FILTER) {
+        const filteredData = this.chart.filterData(this.chart.getData());
+        meta({ chart, options: { ...options, data: filteredData } });
+      }
+
+      if (evt.data?.source === BRUSH_FILTER_EVENTS.RESET) {
+        meta({ chart, options });
+      }
+    });
+  }
+
   /**
    * @override
    * @param data

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'),
+        }
+      : {},
   };
 };