fix: 数据对象中存在 x,y 等关键字段

antvis · Oct 16, 2023 · 5f221d5 · 5f221d5
1 parent 535dfba
commit 5f221d5
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx
@@ -28,6 +28,8 @@ class Geometry<
 
   // 预处理后的数据
   dataArray: any;
+  // data 预处理后，records mapping 前的数据
+  dataRecords: any[];
   records: any[];
   mappedArray: any;
   // x 轴居中
@@ -73,17 +75,17 @@ class Geometry<
     const lastAttrOptions = attrController.getAttrOptions(lastProps, justifyContentCenter);
     if (!equal(nextAttrOptions, lastAttrOptions)) {
       attrController.update(nextAttrOptions);
-      this.records = null;
+      this.dataRecords = null;
     }
 
     // 重新处理数据
     if (nextData !== lastData) {
-      this.records = null;
+      this.dataRecords = null;
     }
 
     // 重新处理数据
     if (nextAdjust !== lastAdjust) {
-      this.records = null;
+      this.dataRecords = null;
     }
 
     // zoomRange发生变化,records也需要重新计算
@@ -94,13 +96,13 @@ class Geometry<
 
   willMount() {
     this._createAttrs();
-    if (!this.records) {
+    if (!this.dataRecords) {
       this._processData();
     }
   }
   willUpdate() {
     this._createAttrs();
-    if (!this.records) {
+    if (!this.dataRecords) {
       this._processData();
     }
   }
@@ -302,7 +304,7 @@ class Geometry<
       this._sortData(records);
     }
 
-    this.records = records;
+    this.dataRecords = records;
   }
 
   _sortData(records) {
@@ -391,6 +393,7 @@ class Geometry<
     const { linearAttrs, nonlinearAttrs } = attrController.getAttrsByLinear();
     const defaultAttrValues = attrController.getDefaultAttrValues();
 
+    const mappedRecords = [];
     for (let i = 0, len = records.length; i < len; i++) {
       const record = records[i];
       const { children } = record;
@@ -399,6 +402,7 @@ class Geometry<
       };
       const firstChild = children[0];
       if (children.length === 0) {
+        mappedRecords.push({ ...record });
         continue;
       }
       // 非线性映射
@@ -410,6 +414,7 @@ class Geometry<
       }
 
       // 线性属性映射
+      const mappedChildren = [];
       for (let j = 0, childrenLen = children.length; j < childrenLen; j++) {
         const child = children[j];
         const normalized: any = {};
@@ -430,11 +435,14 @@ class Geometry<
         });
 
         // 获取 shape 的 style
+        const { origin } = child;
         const shapeName = attrValues.shape;
-        const shape = this._getShapeStyle(shapeName, child.origin);
+        const shape = this._getShapeStyle(shapeName, origin);
         const selected = this.isSelected(child);
 
-        mix(child, attrValues, {
+        mappedChildren.push({
+          ...child,
+          ...attrValues,
           normalized,
           x,
           y,
@@ -443,17 +451,21 @@ class Geometry<
           selected,
         });
       }
+      mappedRecords.push({
+        ...record,
+        children: mappedChildren,
+      });
     }
-    return records;
+    return mappedRecords;
   }
 
   // 数据映射
   mapping() {
-    const { records } = this;
+    const { dataRecords } = this;
     // 数据映射
-    this._mapping(records);
+    this.records = this._mapping(dataRecords);
 
-    return records;
+    return this.records;
   }
 
   getClip() {

diff --git a/...ents/geometry/__image_snapshots__/index-test-tsx-geometry-原始数据中有绘图属性-1-snap.png b/...ents/geometry/__image_snapshots__/index-test-tsx-geometry-原始数据中有绘图属性-1-snap.png
diff --git a/packages/f2/test/components/geometry/index.test.tsx b/packages/f2/test/components/geometry/index.test.tsx
@@ -1,4 +1,4 @@
-import { jsx } from '../../../src/jsx';
+import { jsx, Line } from '../../../src';
 import Geometry from '../../../src/components/geometry';
 import { createContext, delay } from '../../util';
 import { Canvas, Chart, Interval, Axis } from '../../../src';
@@ -84,4 +84,26 @@ describe('geometry', () => {
     await delay(50);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('原始数据中有绘图属性', async () => {
+    const data = [
+      { type: 'FULFILLMENT', y: 171, x: '守约记录' },
+      { type: 'BEHAVIOR', y: 180, x: '行为积累' },
+      { type: 'CHARACTERISTICS', y: 179, x: '身份证明' },
+      { type: 'CAPITAL', y: 160, x: '资产证明' },
+      { type: 'RELATIONSHIP', y: 146, x: '人脉关系' },
+    ];
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Line x="x" y="y" />
+        </Chart>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    canvas.render();
+    canvas.resize(200, 200);
+
+    expect(context).toMatchImageSnapshot();
+  });
 });