fix: transposed为false时饼图交互 (#1923)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>

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;
+        }
       }
     }
 

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 } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart
+          ref={chartRef}
+          data={data}
+          coord={{
+            type: 'polar',
+            transposed: false,
+            innerRadius: 0.7,
+            radius: 1,
+          }}
+          scale={{
+            a: {
+              type: 'linear',
+              nice: false,
+            },
+          }}
+        >
+          <Interval
+            x="a"
+            y="percent"
+            adjust="stack"
+            color={{
+              field: 'name',
+              range: ['#FE5D4D', '#3BA4FF', '#737DDE'],
+            }}
+            selection={{
+              selectedStyle: (value) => {
+                return {
+                  r: value.yMax * 1.4,
+                };
+              },
+            }}
+          />
+          <Legend
+            position="right"
+            itemFormatter={(value, name) => {
+              return map[name];
+            }}
+            valuePrefix="      "
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    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();
+  });
 });