feat: 支持用户指定确定数据 id 的字段

antvis · Mar 18, 2020 · 25caa91 · 25caa91
1 parent 4b97895
commit 25caa91
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 2 deletions.
diff --git a/src/geometry/base.ts b/src/geometry/base.ts
@@ -200,6 +200,7 @@ export default class Geometry extends Base {
   private adjusts: Record<string, Adjust> = {};
   private lastAttributeOption;
   private labelsRenderer: Labels;
+  private idFields: string[] = [];
 
   /**
    * 创建 Geometry 实例。
@@ -890,6 +891,7 @@ export default class Geometry extends Base {
     this.beforeMappingData = null;
     this.lastAttributeOption = undefined;
     this.defaultSize = undefined;
+    this.idFields = [];
   }
 
   /**
@@ -1039,6 +1041,17 @@ export default class Geometry extends Base {
   public getElementId(data: MappingDatum | MappingDatum[]) {
     data = isArray(data) ? data[0] : data;
     const originData = data[FIELD_ORIGIN];
+
+    // 如果用户声明了使用哪些字段作为 id 值
+    if (this.idFields.length) {
+      let elementId = originData[this.idFields[0]];
+      for (let index = 1; index < this.idFields.length; index++) {
+        elementId += '-' + originData[this.idFields[index]];
+      }
+
+      return elementId;
+    }
+
     const type = this.type;
     const xScale = this.getXScale();
     const yScale = this.getYScale();
@@ -1772,6 +1785,12 @@ export default class Geometry extends Base {
     }
     if (scaleDefs) {
       this.scaleDefs = scaleDefs;
+      this.idFields = [];
+      each(scaleDefs, (scaleDef, field) => {
+        if (get(scaleDef, 'key')) {
+          this.idFields.push(field);
+        }
+      });
     }
     if (theme) {
       this.theme = theme;

diff --git a/src/interface.ts b/src/interface.ts
@@ -558,6 +558,26 @@ export interface ScaleOption extends ScaleConfig {
    * 只对 type: 'time' 的 scale 生效，强制显示最后的日期 tick。
    */
   showLast?: boolean;
+  /**
+   * 用于声明使用数据记录中的哪些字段来组成一条数据的唯一 id（如有多个字段，则使用 '-' 连接）。
+   * 数据 id 用于标识 Element 图形元素，应用于 Geometry 中的图形元素 Element 更新。
+   * 默认 G2 内部会有一套 ID 生成规则，如果不能满足用户需求，用户既可以使用该属性配置 id。
+   * @example
+   *
+   * 下面的例子中，声明了将 'x' 和 'y' 字段的数值来作为每条数据记录的 id，即下面数据两条数据的 id 分别为：'1-23' 和 '2-2'。
+   * ```ts
+   * const data = [
+   *   { x: 1, y: 23, z: 'a' },
+   *   { x: 2, y: 2, z: 'b' },
+   * ];
+   *
+   * chart.scale({
+   *   x: { key: true },
+   *   y: { key: true },
+   * });
+   * ```
+   */
+  key?: boolean;
 }
 
 /** Geometry 动画参数配置。geometry.animate() */

diff --git a/tests/unit/chart/chart-spec.ts b/tests/unit/chart/chart-spec.ts
@@ -3,6 +3,8 @@ import { VIEW_LIFE_CIRCLE } from '../../../src/constant';
 import { CITY_SALE } from '../../util/data';
 import { createDiv } from '../../util/dom';
 
+import 'jest-extended';
+
 describe('Chart', () => {
   const div = createDiv();
 
@@ -17,8 +19,8 @@ describe('Chart', () => {
 
   chart.data(CITY_SALE);
   chart.scale({
-    city: {},
-    sale: {},
+    city: { key: true },
+    sale: { key: true },
   });
 
   chart
@@ -83,6 +85,14 @@ describe('Chart', () => {
     expect(chart.visible).toBe(false);
   });
 
+  it('element id', () => {
+    const elementsMap = chart.geometries[0].elementsMap;
+    expect(elementsMap).toContainAllKeys([
+      '杭州-100', '广州-30', '上海-110', '呼和浩特-40',
+      '杭州-40', '广州-90', '上海-200', '呼和浩特-10',
+    ]);
+  });
+
   it('show()', () => {
     chart.show();
     expect(chart.visible).toBe(true);
@@ -117,6 +127,12 @@ describe('Chart', () => {
       width: 700,
       height: 600,
     });
+
+    const elementsMap = chart.geometries[0].elementsMap;
+    expect(elementsMap).toContainAllKeys([
+      '杭州-100', '广州-30', '上海-110', '呼和浩特-40',
+      '杭州-40', '广州-90', '上海-200', '呼和浩特-10',
+    ]);
   });
 
   it('changeVisible', () => {