diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx index b176a9295..122922aaa 100644 --- 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/packages/f2/test/components/interaction/__image_snapshots__/pan-test-tsx-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-dodge-\347\261\273\345\236\213-pan-\344\272\213\344\273\266-1-snap.png" "b/packages/f2/test/components/interaction/__image_snapshots__/pan-test-tsx-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-dodge-\347\261\273\345\236\213-pan-\344\272\213\344\273\266-1-snap.png" new file mode 100644 index 000000000..d19cb2d70 Binary files /dev/null and "b/packages/f2/test/components/interaction/__image_snapshots__/pan-test-tsx-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-dodge-\347\261\273\345\236\213-pan-\344\272\213\344\273\266-1-snap.png" differ diff --git "a/packages/f2/test/components/interaction/__image_snapshots__/pan-test-tsx-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-dodge-\347\261\273\345\236\213-\345\210\235\345\247\213\345\214\226-1-snap.png" "b/packages/f2/test/components/interaction/__image_snapshots__/pan-test-tsx-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-dodge-\347\261\273\345\236\213-\345\210\235\345\247\213\345\214\226-1-snap.png" new file mode 100644 index 000000000..04b04e964 Binary files /dev/null and "b/packages/f2/test/components/interaction/__image_snapshots__/pan-test-tsx-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-dodge-\347\261\273\345\236\213-\345\210\235\345\247\213\345\214\226-1-snap.png" differ diff --git a/packages/f2/test/components/interaction/pan.test.tsx b/packages/f2/test/components/interaction/pan.test.tsx index 888c1a177..1029dcc0c 100644 --- 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 = 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(); + }); + }); });