fix: 临时修复 dodge 的平移问题 (#1888)

antvis · Nov 22, 2023 · 0a5dd90 · 0a5dd90
1 parent 03de4fd
commit 0a5dd90
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 5 deletions.
diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx
@@ -287,7 +287,7 @@ class Geometry<
         const scale = scales[i];
         if (scale.isCategory) {
           const field = scale.field;
-          obj[field] = scale.translate(obj[field]);
+          obj[field] = scale.translate(obj.origin[field]);
         }
       }
     }
@@ -466,7 +466,7 @@ class Geometry<
    *  如果是Category/Identity 则第一个元素走 mapping
    */
   _mapping(records) {
-    const { attrs, props, attrController } = this;
+    const { attrs, props, attrController, adjust } = this;
     const { coord } = props;
 
     const { linearAttrs, nonlinearAttrs } = attrController.getAttrsByLinear();
@@ -500,11 +500,21 @@ class Geometry<
         for (let k = 0; k < linearAttrs.length; k++) {
           const attrName = linearAttrs[k];
           const attr = attrs[attrName];
+
+          // TODO: 这块逻辑只是临时方案，需要整体考虑
+          let value = child[attr.field];
+          // 如果 scale变化，每组偏移需要重新计算
+          if (adjust?.type === 'dodge' && attr.field === adjust.adjust.xField) {
+            value =
+              attr.scale.translate(child.origin[attr.field]) -
+              (Math.round(child[attr.field]) - child[attr.field]);
+          }
+
           // 分类属性的线性映射
           if (attrController.isGroupAttr(attrName)) {
-            attrValues[attrName] = attr.mapping(child[attr.field], child);
+            attrValues[attrName] = attr.mapping(value, child);
           } else {
-            normalized[attrName] = attr.normalize(child[attr.field]);
+            normalized[attrName] = attr.normalize(value);
           }
         }
 

diff --git a/...raction/__image_snapshots__/pan-test-tsx-平移和缩放-平移和缩放-dodge-类型-pan-事件-1-snap.png b/...raction/__image_snapshots__/pan-test-tsx-平移和缩放-平移和缩放-dodge-类型-pan-事件-1-snap.png
diff --git a/...nteraction/__image_snapshots__/pan-test-tsx-平移和缩放-平移和缩放-dodge-类型-初始化-1-snap.png b/...nteraction/__image_snapshots__/pan-test-tsx-平移和缩放-平移和缩放-dodge-类型-初始化-1-snap.png
diff --git a/packages/f2/test/components/interaction/pan.test.tsx b/packages/f2/test/components/interaction/pan.test.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { jsx } from '../../../src';
 import { Canvas, Chart } from '../../../src';
-import { Axis, Line, ScrollBar } from '../../../src';
+import { Axis, Line, ScrollBar, Interval } from '../../../src';
 import { createContext, delay, gestureSimulator } from '../../util';
 
 describe('平移和缩放', () => {
@@ -223,4 +223,135 @@ describe('平移和缩放', () => {
       context.canvas.remove();
     });
   });
+
+  describe('平移和缩放-dodge 类型', () => {
+    const context = createContext('dodge', {
+      width: '350px',
+      height: '300px',
+    });
+
+    let canvas: Canvas;
+
+    const data = [
+      {
+        name: 'London',
+        月份: 'Jan.',
+        月均降雨量: 18.9,
+      },
+      {
+        name: 'London',
+        月份: 'Feb.',
+        月均降雨量: 28.8,
+      },
+      {
+        name: 'London',
+        月份: 'Mar.',
+        月均降雨量: 39.3,
+      },
+      {
+        name: 'London',
+        月份: 'Apr.',
+        月均降雨量: 81.4,
+      },
+      {
+        name: 'London',
+        月份: 'May.',
+        月均降雨量: 47,
+      },
+      {
+        name: 'London',
+        月份: 'Jun.',
+        月均降雨量: 20.3,
+      },
+      {
+        name: 'London',
+        月份: 'Jul.',
+        月均降雨量: 24,
+      },
+      {
+        name: 'London',
+        月份: 'Aug.',
+        月均降雨量: 35.6,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Jan.',
+        月均降雨量: 12.4,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Feb.',
+        月均降雨量: 23.2,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Mar.',
+        月均降雨量: 34.5,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Apr.',
+        月均降雨量: 99.7,
+      },
+      {
+        name: 'Berlin',
+        月份: 'May.',
+        月均降雨量: 52.6,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Jun.',
+        月均降雨量: 35.5,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Jul.',
+        月均降雨量: 37.4,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Aug.',
+        月均降雨量: 42.4,
+      },
+    ];
+
+    it('初始化', async () => {
+      const { props } = (
+        <Canvas context={context} animate={false} pixelRatio={1}>
+          <Chart data={data}>
+            <Axis field="月份" />
+            <Axis field="月均降雨量" />
+            <Interval
+              x="月份"
+              y="月均降雨量"
+              color="name"
+              adjust={{
+                type: 'dodge',
+                // marginRatio: 0.05, // 设置分组间柱子的间距
+              }}
+              viewClip
+            />
+            <ScrollBar mode="x" range={[0, 0.7]} />
+          </Chart>
+        </Canvas>
+      );
+
+      canvas = new Canvas(props);
+      await canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
+
+    it('pan 事件', async () => {
+      await delay(20);
+      await gestureSimulator(context.canvas, 'touchstart', { x: 210, y: 169 });
+      await delay(20);
+      await gestureSimulator(context.canvas, 'touchmove', { x: 100, y: 169 });
+      await delay(20);
+      await gestureSimulator(context.canvas, 'touchend', { x: 100, y: 169 });
+      await delay(300);
+      expect(context).toMatchImageSnapshot();
+    });
+  });
 });