[BUG]: text mark 的 style.x/y 属性触发 MaybeVisualPosition 导致 selectX transform 选择错误数据点
- 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
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