diff --git a/__tests__/integration/snapshots/static/alphabetIntervalFunnel.png b/__tests__/integration/snapshots/static/alphabetIntervalFunnel.png new file mode 100644 index 0000000000..be9d422f36 Binary files /dev/null and b/__tests__/integration/snapshots/static/alphabetIntervalFunnel.png differ diff --git a/__tests__/plots/static/alphabet-interval-funnel.ts b/__tests__/plots/static/alphabet-interval-funnel.ts new file mode 100644 index 0000000000..09b223a624 --- /dev/null +++ b/__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 }, + }, + }; +} diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts index 43a9343a26..e1f2310a8c 100644 --- a/__tests__/plots/static/index.ts +++ b/__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'; diff --git a/src/shape/interval/color.ts b/src/shape/interval/color.ts index bb948fc9b5..b1d3fb7c3e 100644 --- a/src/shape/interval/color.ts +++ b/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)