离散坐标下，如何标注 [-Infinity, x] 区域？ #6006

问题描述

https://g2.antv.antgroup.com/zh/examples/annotation/line/#quadrant-scatter 标注例子是连续坐标，如何在离散坐标下，标注超出某个值的区域？（即包含 padding 区域等）

<img width="720" alt="image" src="https://github.com/antvis/G2/assets/20316342/1e5b395b-6d5c-4edc-9608-b320ac46de22">

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.data({
  type: 'fetch',
  value:
    'https://gw.alipayobjects.com/os/bmw-prod/0b37279d-1674-42b4-b285-29683747ad9a.json',
  transform: [
    { type: 'filter', callback: (d) => d['change in male rate'] !== 'NA' },
  ],
});

chart
  .range()
  .data([
    { x: [-25, 0], y: ['Low income', 'Lower middle income'], region: '1' },
  ])
  .encode('x', 'x')
  .encode('y', 'y')
  .style('fill', '#d8d0c0')

chart
  .point()
  .encode('x', 'change in female rate')
  .encode('y', 'income')
  .encode('size', 'pop')
  .encode('color', 'continent')
  .encode('shape', 'point')
  .scale('y', {
    domain: ['Low income', 'Lower middle income', 'Upper middle income', 'High income'],
  })
  .scale('color', {
    range: ['#ffd500', '#82cab2', '#193442', '#d18768', '#7e827a'],
  })
  .scale('size', { range: [4, 30] })
  .style('fillOpacity', 0.8)
  .legend(false);

chart.render();

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response