feat: 基于 annotation shape 实现 regression line (#1803)

* feat: 基于 annotation shape 实现 trendline * fix: conversation * fix: conversation * fix: conversation Co-authored-by: liufu.lf <liufu.lf@antfin.com>
antvis · Oct 28, 2020 · 7dbc224 · 7dbc224
1 parent 76a4a25
commit 7dbc224
Show file tree

Hide file tree

Showing 11 changed files with 564 additions and 14 deletions.
diff --git a/__tests__/unit/plots/scatter/regression-line-spec.ts b/__tests__/unit/plots/scatter/regression-line-spec.ts
@@ -0,0 +1,110 @@
+import { Scatter } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+const data = [
+  { x: 1, y: 4.181 },
+  { x: 2, y: 4.665 },
+  { x: 3, y: 5.296 },
+  { x: 4, y: 5.365 },
+  { x: 5, y: 5.448 },
+  { x: 6, y: 5.744 },
+  { x: 7, y: 5.653 },
+  { x: 8, y: 5.844 },
+  { x: 9, y: 6.362 },
+  { x: 10, y: 6.38 },
+  { x: 11, y: 6.311 },
+  { x: 12, y: 6.457 },
+  { x: 13, y: 6.479 },
+  { x: 14, y: 6.59 },
+  { x: 15, y: 6.74 },
+  { x: 16, y: 6.58 },
+  { x: 17, y: 6.852 },
+  { x: 18, y: 6.531 },
+  { x: 19, y: 6.682 },
+  { x: 20, y: 7.013 },
+  { x: 21, y: 6.82 },
+  { x: 22, y: 6.647 },
+  { x: 23, y: 6.951 },
+  { x: 24, y: 7.121 },
+  { x: 25, y: 7.143 },
+  { x: 26, y: 6.914 },
+  { x: 27, y: 6.941 },
+  { x: 28, y: 7.226 },
+  { x: 29, y: 6.898 },
+  { x: 30, y: 7.392 },
+  { x: 31, y: 6.938 },
+];
+
+describe('scatter', () => {
+  it('regressionLine: type', () => {
+    const scatter = new Scatter(createDiv('regressionLine'), {
+      data,
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      xField: 'x',
+      yField: 'y',
+      size: 5,
+      pointStyle: {
+        stroke: '#777777',
+        lineWidth: 1,
+        fill: '#5B8FF9',
+      },
+      regressionLine: {
+        type: 'quad', // linear, exp, loess, log, poly, pow, quad
+        style: {
+          stroke: 'red',
+        },
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const annotation = scatter.chart.annotation();
+    // @ts-ignore
+    const options = annotation.option[0];
+    expect(options.type).toBe('shape');
+    const elements = geometry.elements;
+    expect(elements.length).toBe(31);
+    // @ts-ignore
+    expect(elements[0].getModel().style.fill).toBe('#5B8FF9');
+    expect(elements[0].getModel().size).toBe(5);
+  });
+
+  it('regressionLine: algorithm', () => {
+    const scatter = new Scatter(createDiv('regressionLine*algorithm'), {
+      data,
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      xField: 'x',
+      yField: 'y',
+      size: 5,
+      pointStyle: {
+        stroke: '#777777',
+        lineWidth: 1,
+        fill: '#5B8FF9',
+      },
+      regressionLine: {
+        algorithm: [
+          [0, 0],
+          [200, 200],
+        ],
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const annotation = scatter.chart.annotation();
+    // @ts-ignore
+    const options = annotation.option[0];
+    expect(options.type).toBe('shape');
+    const elements = geometry.elements;
+    expect(elements.length).toBe(31);
+    // @ts-ignore
+    expect(elements[0].getModel().style.fill).toBe('#5B8FF9');
+    expect(elements[0].getModel().size).toBe(5);
+  });
+});
diff --git a/examples/scatter/basic/API.en.md b/examples/scatter/basic/API.en.md
@@ -141,6 +141,42 @@ scatterPlot.render();
 }
 ```
 
+#### regressionLine
+
+**可选**, _object_
+
+功能描述： 设置回归线。
+
+| 细分配置  | 类型                                                | 功能描述                            |
+| --------- | --------------------------------------------------- | ----------------------------------- |
+| type      | linear \| exp \| loess \| log\| poly \| pow \| quad | 回归线类型                          |
+| style     | object                                              | 回归线样式，参考绘图属性            |
+| algorithm | [][] \| (data) => [][]                              | 自定义回归算法 返回值自定义数据数组 |
+
+```ts
+regressionLine: {
+  algorithm: [
+    [0, 0],
+    [200, 200],
+  ];
+}
+```
+
+#### quadrant
+
+**可选**, _object_
+
+功能描述： 四象限组件。
+
+| 细分配置    | 类型    | 功能描述                           |
+| ----------- | ------- | ---------------------------------- |
+| xBaseline   | number  | x 方向上的象限分割基准线，默认为 0 |
+| yBaseline   | number  | y 方向上的象限分割基准线，默认为 0 |
+| lineStyle   | object  | 配置象限分割线的样式，参考绘图属性 |
+| regionStyle | object  | 象限样式，参考绘图属性             |
+| lineStyle   | object  | 回归线样式，参考绘图属性           |
+| labels      | label[] | 象限文本配置，参考绘图属性         |
+
 #### pointStyle ✨
 
 **可选**, _object_

diff --git a/examples/scatter/basic/API.zh.md b/examples/scatter/basic/API.zh.md
@@ -142,6 +142,42 @@ scatterPlot.render();
 }
 ```
 
+#### regressionLine
+
+**可选**, _object_
+
+功能描述： 设置回归线。
+
+| 细分配置  | 类型                                                | 功能描述                            |
+| --------- | --------------------------------------------------- | ----------------------------------- |
+| type      | linear \| exp \| loess \| log\| poly \| pow \| quad | 回归线类型                          |
+| style     | object                                              | 回归线样式，参考绘图属性            |
+| algorithm | [][] \| (data) => [][]                              | 自定义回归算法 返回值自定义数据数组 |
+
+```ts
+regressionLine: {
+  algorithm: [
+    [0, 0],
+    [200, 200],
+  ];
+}
+```
+
+#### quadrant
+
+**可选**, _object_
+
+功能描述： 四象限组件。
+
+| 细分配置    | 类型    | 功能描述                           |
+| ----------- | ------- | ---------------------------------- |
+| xBaseline   | number  | x 方向上的象限分割基准线，默认为 0 |
+| yBaseline   | number  | y 方向上的象限分割基准线，默认为 0 |
+| lineStyle   | object  | 配置象限分割线的样式，参考绘图属性 |
+| regionStyle | object  | 象限样式，参考绘图属性             |
+| lineStyle   | object  | 回归线样式，参考绘图属性           |
+| labels      | label[] | 象限文本配置，参考绘图属性         |
+
 #### pointStyle ✨
 
 **可选**, _object_

diff --git a/examples/scatter/basic/demo/line.ts b/examples/scatter/basic/demo/line.ts
@@ -0,0 +1,50 @@
+import { Scatter } from '@antv/g2plot';
+
+const data = [
+  { x: 1, y: 4.181 },
+  { x: 2, y: 4.665 },
+  { x: 3, y: 5.296 },
+  { x: 4, y: 5.365 },
+  { x: 5, y: 5.448 },
+  { x: 6, y: 5.744 },
+  { x: 7, y: 5.653 },
+  { x: 8, y: 5.844 },
+  { x: 9, y: 6.362 },
+  { x: 10, y: 6.38 },
+  { x: 11, y: 6.311 },
+  { x: 12, y: 6.457 },
+  { x: 13, y: 6.479 },
+  { x: 14, y: 6.59 },
+  { x: 15, y: 6.74 },
+  { x: 16, y: 6.58 },
+  { x: 17, y: 6.852 },
+  { x: 18, y: 6.531 },
+  { x: 19, y: 6.682 },
+  { x: 20, y: 7.013 },
+  { x: 21, y: 6.82 },
+  { x: 22, y: 6.647 },
+  { x: 23, y: 6.951 },
+  { x: 24, y: 7.121 },
+  { x: 25, y: 7.143 },
+  { x: 26, y: 6.914 },
+  { x: 27, y: 6.941 },
+  { x: 28, y: 7.226 },
+  { x: 29, y: 6.898 },
+  { x: 30, y: 7.392 },
+  { x: 31, y: 6.938 },
+];
+const scatterPlot = new Scatter('container', {
+  data,
+  xField: 'x',
+  yField: 'y',
+  size: 5,
+  pointStyle: {
+    stroke: '#777777',
+    lineWidth: 1,
+    fill: '#5B8FF9',
+  },
+  regressionLine: {
+    type: 'quad', // linear, exp, loess, log, poly, pow, quad
+  },
+});
+scatterPlot.render();
diff --git a/examples/scatter/basic/demo/meta.json b/examples/scatter/basic/demo/meta.json
@@ -28,6 +28,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tdedT4uaPaYAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "line.ts",
+      "title": {
+        "zh": "散点图-回归线",
+        "en": "Bubble chart regression line"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*JWiDQIYm09AAAAAAAAAAAAAAARQnAQ"
+    },
     {
       "filename": "axis-right.ts",
       "title": {

diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "@antv/event-emitter": "^0.1.2",
     "@antv/g2": "^4.1.0-beta.14",
     "d3-hierarchy": "^2.0.0",
+    "d3-regression": "^1.3.5",
     "dayjs": "^1.8.36",
     "size-sensor": "^1.0.1",
     "tslib": "^1.13.0"

diff --git a/src/plots/scatter/adaptor.ts b/src/plots/scatter/adaptor.ts
@@ -4,6 +4,7 @@ import { flow } from '../../utils';
 import { point } from '../../adaptor/geometries';
 import { tooltip, interaction, animation, theme, scale, annotation } from '../../adaptor/common';
 import { findGeometry, transformLabel } from '../../utils';
+import { regressionLine } from './annotations/path';
 import { getQuadrantDefaultConfig } from './util';
 import { ScatterOptions } from './types';
 
@@ -180,5 +181,17 @@ function scatterAnnotation(params: Params<ScatterOptions>): Params<ScatterOption
  */
 export function adaptor(params: Params<ScatterOptions>) {
   // flow 的方式处理所有的配置到 G2 API
-  return flow(geometry, meta, axis, legend, tooltip, label, interaction, scatterAnnotation, animation, theme)(params);
+  return flow(
+    geometry,
+    meta,
+    axis,
+    legend,
+    tooltip,
+    label,
+    interaction,
+    scatterAnnotation,
+    animation,
+    theme,
+    regressionLine
+  )(params);
 }