antvis / antvis/G2

离散坐标下,如何标注 [-Infinity, x] 区域?

Open
#6,006 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

### 问题描述

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

image

```js
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_

Contributor guide

Open the contributing guide

Research direction

Start with the linked quadrant-scatter annotation example and the supplied chart configuration, especially the range mark and discrete y scale. Determine how an annotation can represent a region extending beyond a threshold on discrete coordinates, including padding. Done means providing a working configuration or documenting that the behavior requires a product change.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.