diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx index 03d1d9c1a..9af14bc96 100644 --- a/packages/f2/src/components/geometry/index.tsx +++ b/packages/f2/src/components/geometry/index.tsx @@ -674,6 +674,24 @@ class Geometry< }); } + _getXSnapRecords(invertPointX, records) { + const xScale = this.getXScale(); + const { field: xField } = xScale; + const xValue = xScale.invert(invertPointX); + // category + if (xScale.isCategory) { + return records.filter((record) => record[FIELD_ORIGIN][xField] === xValue); + } + // linear + return records.filter((record) => { + const rangeX = record[xField]; + if (rangeX[0] <= xValue && rangeX[1] >= xValue) { + return true; + } + return false; + }); + } + // 把 records 拍平 flatRecords() { const { records } = this; @@ -721,11 +739,18 @@ class Geometry< }; // 处理饼图 - if (adjust === 'stack' && coord.isPolar && coord.transposed) { - // 弧度在半径范围内 - if (invertPoint.x >= 0 && invertPoint.x <= 1) { - const snapRecords = this._getYSnapRecords(invertPoint.y, records); - return snapRecords; + if (adjust === 'stack' && coord.isPolar) { + if (coord.transposed) { + // 弧度在半径范围内 + if (invertPoint.x >= 0 && invertPoint.x <= 1) { + const snapRecords = this._getYSnapRecords(invertPoint.y, records); + return snapRecords; + } + } else { + if (invertPoint.y >= 0 && invertPoint.y <= 1) { + const snapRecords = this._getXSnapRecords(invertPoint.x, records); + return snapRecords; + } } } diff --git "a/packages/f2/test/components/interval/example/__image_snapshots__/doughnut-test-tsx-\347\216\257\345\275\242\345\233\276-\347\216\253\347\221\260\347\216\257\345\275\242\345\233\276-1-snap.png" "b/packages/f2/test/components/interval/example/__image_snapshots__/doughnut-test-tsx-\347\216\257\345\275\242\345\233\276-\347\216\253\347\221\260\347\216\257\345\275\242\345\233\276-1-snap.png" new file mode 100644 index 000000000..f1e525b11 Binary files /dev/null and "b/packages/f2/test/components/interval/example/__image_snapshots__/doughnut-test-tsx-\347\216\257\345\275\242\345\233\276-\347\216\253\347\221\260\347\216\257\345\275\242\345\233\276-1-snap.png" differ diff --git "a/packages/f2/test/components/interval/example/__image_snapshots__/doughnut-test-tsx-\347\216\257\345\275\242\345\233\276-\347\216\253\347\221\260\347\216\257\345\275\242\345\233\276-2-snap.png" "b/packages/f2/test/components/interval/example/__image_snapshots__/doughnut-test-tsx-\347\216\257\345\275\242\345\233\276-\347\216\253\347\221\260\347\216\257\345\275\242\345\233\276-2-snap.png" new file mode 100644 index 000000000..4e6835782 Binary files /dev/null and "b/packages/f2/test/components/interval/example/__image_snapshots__/doughnut-test-tsx-\347\216\257\345\275\242\345\233\276-\347\216\253\347\221\260\347\216\257\345\275\242\345\233\276-2-snap.png" differ diff --git a/packages/f2/test/components/interval/example/doughnut.test.tsx b/packages/f2/test/components/interval/example/doughnut.test.tsx index 7c8d1400b..5fbb4c025 100644 --- a/packages/f2/test/components/interval/example/doughnut.test.tsx +++ b/packages/f2/test/components/interval/example/doughnut.test.tsx @@ -2,7 +2,7 @@ import { jsx } from '../../../../src'; import { Polar, Rect } from '../../../../src/coord'; import { Canvas, Chart } from '../../../../src'; import { Interval, Axis, Legend, Tooltip, ArcGuide, TextGuide } from '../../../../src/components'; -import { createContext, delay } from '../../../util'; +import { createContext, delay, gestureSimulator } from '../../../util'; describe('环形图', () => { it('基础环形图', async () => { @@ -233,4 +233,87 @@ describe('环形图', () => { await delay(1000); expect(context).toMatchImageSnapshot(); }); + + it('玫瑰环形图', async () => { + const data = [ + { + name: '股票类', + percent: 10, + a: [0, 83], + }, + { + name: '债券类', + percent: 40, + a: [83, 110], + }, + { + name: '现金类', + percent: 80, + a: [110, 134], + }, + ]; + + const map = {}; + data.forEach(function(obj) { + map[obj.name] = obj.percent + '%'; + }); + + const context = createContext('基础环形图'); + const chartRef = { current: null }; + const { type, props } = ( + + + { + return { + r: value.yMax * 1.4, + }; + }, + }} + /> + { + return map[name]; + }} + valuePrefix=" " + /> + + + ); + + const canvas = new Canvas(props); + await canvas.render(); + + await delay(1000); + expect(context).toMatchImageSnapshot(); + await delay(20); + + await gestureSimulator(context.canvas, 'click', { x: 133, y: 64 }); + await delay(100); + expect(context).toMatchImageSnapshot(); + }); });