fix(interval): fix interval render funnel (#4868)

__tests__/plots/static/alphabet-interval-funnel.ts

@@ -0,0 +1,38 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalFunnel(): G2Spec {
+  return {
+    type: 'interval',
+    coordinate: {
+      transform: [{ type: 'transpose' }],
+    },
+    data: [
+      { text: '页面', value: 1000 },
+      { text: '页面1', value: 900 },
+      { text: '页面2', value: 800 },
+      { text: '页面3', value: 700 },
+    ],
+    transform: [
+      {
+        type: 'symmetryY',
+      },
+    ],
+    axis: {
+      x: false,
+      y: false,
+    },
+    style: {
+      radius: 6,
+      stroke: '#ff0000',
+    },
+    encode: {
+      x: 'text',
+      y: 'value',
+      color: 'steelblue',
+      shape: 'funnel',
+    },
+    scale: {
+      x: { paddingOuter: 0, paddingInner: 0 },
+    },
+  };
+}

__tests__/plots/static/index.ts

@@ -1,4 +1,5 @@
 export { alphabetInterval } from './alphabet-interval';
+export { alphabetIntervalFunnel } from './alphabet-interval-funnel';
 export { alphabetIntervalTitle } from './alphabet-interval-title';
 export { alphabetIntervalLabelOverflowHide } from './alphabet-interval-label-overflow-hide';
 export { alphabetIntervalLabelContrastReverse } from './alphabet-interval-label-contrast-reverse';

src/shape/interval/color.ts

@@ -1,5 +1,5 @@
 import { Path, Rect } from '@antv/g';
-import { arc } from 'd3-shape';
+import { arc, line, curveLinearClosed } from 'd3-shape';
 import { Vector2, ShapeComponent as SC } from '../../runtime';
 import { isPolar, isHelix, isTranspose } from '../../utils/coordinate';
 import { select } from '../../utils/selection';
@@ -40,7 +40,7 @@ export function rect(
   if (!isPolar(coordinate) && !isHelix(coordinate)) {
     const tpShape = !!isTranspose(coordinate);
 
-    const [p0, , p2] = tpShape ? reorder(points) : points;
+    const [p0, p1, p2, p3] = tpShape ? reorder(points) : points;
     const [x, y] = p0;
     const [width, height] = sub(p2, p0);
     // Deal with width or height is negative.
@@ -52,7 +52,15 @@ export function rect(
     const finalY = absY + insetTop;
     const finalWidth = absWidth - (insetLeft + insetRight);
     const finalHeight = absHeight - (insetTop + insetBottom);
+    const { shape } = value;
 
+    if (shape === 'funnel' || shape === 'pyramid') {
+      const b = line().curve(curveLinearClosed)([p0, p1, p2, p3]);
+      return select(new Path({}))
+        .style('path', b)
+        .call(applyStyle, rest)
+        .node();
+    }
     return select(new Rect({}))
       .style('x', finalX)
       .style('y', finalY)