antvis / antvis/G2

[BUG]: text mark 的 style.x/y 属性触发 MaybeVisualPosition 导致 selectX transform 选择错误数据点

Open
#7,085 23 comments 1 reaction 0 assignees View on GitHub
waiting for maintainer
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

你会发现,style 的option 影响到了 transform 的选择。去掉style 时,可以正常显示最后一个。

```js
import { Chart } from '../src';
// 有必要的话,请在需要注意的地方加上注释
const chart = new Chart({
container: 'container',
autoFit: true,
});

chart.options({
type: 'view',
data: [
{
time: '2025-08-17T16:00:00Z',
value: 1081,
},
{
time: '2025-08-17T16:09:15Z',
value: 1081,
},
{
time: '2025-08-17T16:18:31Z',
value: 1081,
},
{
time: '2025-08-17T16:27:47Z',
value: 1081,
},
{
time: '2025-08-17T16:37:03Z',
value: 1081,
},
{
time: '2025-08-17T16:46:18Z',
value: 1081,
},
{
time: '2025-08-17T16:55:34Z',
value: 1081,
},
{
time: '2025-08-17T17:04:50Z',
value: 1081,
},
{
time: '2025-08-17T17:14:06Z',
value: 1081,
},
{
time: '2025-08-17T17:23:21Z',
value: 1081,
},
{
time: '2025-08-17T17:32:37Z',
value: 1081,
},
{
time: '2025-08-17T17:41:53Z',
value: 1081,
},
{
time: '2025-08-17T17:51:09Z',
value: 1081,
},
{
time: '2025-08-17T18:00:24Z',
value: 1081,
},
{
time: '2025-08-17T18:09:40Z',
value: 1081,
},
{
time: '2025-08-17T18:18:56Z',
value: 1081,
},
{
time: '2025-08-17T18:28:12Z',
value: 1081,
},
{
time: '2025-08-17T18:37:27Z',
value: 1081,
},
{
time: '2025-08-17T18:46:43Z',
value: 1081,
},
{
time: '2025-08-17T18:55:59Z',
value: 1081,
},
{
time: '2025-08-17T19:05:15Z',
value: 1081,
},
{
time: '2025-08-17T19:14:30Z',
value: 1081,
},
{
time: '2025-08-17T19:23:46Z',
value: 1081,
},
{
time: '2025-08-17T19:33:02Z',
value: 1081,
},
{
time: '2025-08-17T19:42:18Z',
value: 1081,
},
{
time: '2025-08-17T19:51:33Z',
value: 1081,
},
{
time: '2025-08-17T20:00:49Z',
value: 1081,
},
{
time: '2025-08-17T20:10:05Z',
value: 1081,
},
{
time: '2025-08-17T20:19:21Z',
value: 1081,
},
{
time: '2025-08-17T20:28:36Z',
value: 1081,
},
{
time: '2025-08-17T20:37:52Z',
value: 1081,
},
{
time: '2025-08-17T20:47:08Z',
value: 1081,
},
{
time: '2025-08-17T20:56:24Z',
value: 1081,
},
{
time: '2025-08-17T21:05:39Z',
value: 1081,
},
{
time: '2025-08-17T21:14:55Z',
value: 1081,
},
{
time: '2025-08-17T21:24:11Z',
value: 1081,
},
{
time: '2025-08-17T21:33:27Z',
value: 1081,
},
{
time: '2025-08-17T21:42:42Z',
value: 1081,
},
{
time: '2025-08-17T21:51:58Z',
value: 1081,
},
{
time: '2025-08-17T22:01:14Z',
value: 1081,
},
{
time: '2025-08-17T22:10:30Z',
value: 1081,
},
{
time: '2025-08-17T22:19:45Z',
value: 1081,
},
{
time: '2025-08-17T22:29:01Z',
value: 1081,
},
{
time: '2025-08-17T22:38:17Z',
value: 1081,
},
{
time: '2025-08-17T22:47:33Z',
value: 1081,
},
{
time: '2025-08-17T22:56:48Z',
value: 1081,
},
{
time: '2025-08-17T23:06:04Z',
value: 1081,
},
{
time: '2025-08-17T23:15:20Z',
value: 1081,
},
{
time: '2025-08-17T23:24:36Z',
value: 1081,
},
{
time: '2025-08-17T23:33:51Z',
value: 1081,
},
{
time: '2025-08-17T23:43:07Z',
value: 1081,
},
{
time: '2025-08-17T23:52:23Z',
value: 1081,
},
{
time: '2025-08-18T00:01:39Z',
value: 1081,
},
{
time: '2025-08-18T00:10:54Z',
value: 1081,
},
{
time: '2025-08-18T00:20:10Z',
value: 1081,
},
{
time: '2025-08-18T00:29:26Z',
value: 1081,
},
{
time: '2025-08-18T00:38:42Z',
value: 1081,
},
{
time: '2025-08-18T00:47:57Z',
value: 1081,
},
{
time: '2025-08-18T00:57:13Z',
value: 1081,
},
{
time: '2025-08-18T01:06:29Z',
value: 1081,
},
{
time: '2025-08-18T01:15:45Z',
value: 1081,
},
{
time: '2025-08-18T01:25:00Z',
value: 1081,
},
{
time: '2025-08-18T01:34:16Z',
value: 1081,
},
{
time: '2025-08-18T01:43:32Z',
value: 1081,
},
{
time: '2025-08-18T01:52:48Z',
value: 1081,
},
{
time: '2025-08-18T02:02:03Z',
value: 1081,
},
{
time: '2025-08-18T02:11:19Z',
value: 1081,
},
{
time: '2025-08-18T02:20:35Z',
value: 1081,
},
{
time: '2025-08-18T02:29:51Z',
value: 1081,
},
{
time: '2025-08-18T02:39:06Z',
value: 378,
},
{
time: '2025-08-18T02:48:22Z',
value: 379,
},
{
time: '2025-08-18T02:57:38Z',
value: 379,
},
{
time: '2025-08-18T03:06:54Z',
value: 379,
},
{
time: '2025-08-18T03:16:09Z',
value: 379,
},
{
time: '2025-08-18T03:25:25Z',
value: 379,
},
{
time: '2025-08-18T03:34:41Z',
value: 379,
},
{
time: '2025-08-18T03:43:57Z',
value: 379,
},
],
encode: {
x: (d) => {
return new Date(d.time);
},
y: ['value', 0],
},
scale: {
x: {
type: 'time',
utc: false,
mask: 'MM-DD HH:mm',
domain: [ new Date('2025-08-17T16:00:00Z'), new Date('2025-08-19T03:43:57Z') ]
},
y: {
domainMin: 0,
},
},
animate: {
enter: {
type: 'fadeIn',
},
},
interaction: {
tooltip: {
mount: 'body',
css: {
'.g2-tooltip': {
'z-index': 99,
},
},
},
},
children: [
{
type: 'line',
encode: {},
style: { lineWidth: 2.5 },
},
{
type: 'point',
encode: {
x: (d) => {
return new Date(d.time);
},
y: 'value',
},
transform: [
{
type: 'selectX',
selector: 'last',
},
],
tooltip: false,
},
{
type: 'text',
encode: {
text: (d) => {
return d.value.toFixed(2);
},
},
transform: [
{
type: 'selectX',
selector: 'last',
},
],
style: {
textAlign: 'right',
textBaseline: 'top',
fontWeight: 500,
fontFamily: 'UnifiedFont',
x: '100%',
y: -10,
fontSize: 16,
fill: '#1A1A1A',
},
tooltip: false,
},
],
});

chart.render();
```

Contributor guide

Open the contributing guide

Research direction

Start with the supplied Chart example in src and reproduce the difference between the point mark and the text mark. Trace the selectX transform for the text mark, especially when style.x and style.y are present, and compare it with the working case without style. Done means the transform selects the final data point correctly while retaining the text positioning styles.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.