[BUG]: text mark 的 style.x/y 属性触发 MaybeVisualPosition 导致 selectX transform 选择错误数据点 #7085
Description
你会发现，style 的option 影响到了 transform 的选择。去掉style 时，可以正常显示最后一个。
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();