Points on the chart are not displayed correctly if stackY is enabled

[SAScrazyAS]

问题描述

When enabling transform stackY, the points on the graph should lie on lines with the same data

重现链接

No response

重现步骤

1. Create an Area Graph
2. Add multiple episodes
3. Enable transform stackY
4. Add points to the chart

预期行为

The points lie on the surface of the area

平台

• 操作系统: Windows
• 网页浏览器: Google Chrome

屏幕截图或视频（可选）

补充说明（可选）

No response

[hustcc]

Nice issue, can help to fix the bug? the code stackY is here.

You can use the code below to debug.

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

const data = [
  { month: 'Jan', city: 'Tokyo', temperature: 7 },
  { month: 'Jan', city: 'London', temperature: 3.9 },
  { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
  { month: 'Feb', city: 'London', temperature: 4.2 },
  { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
  { month: 'Mar', city: 'London', temperature: 5.7 },
  { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
  { month: 'Apr', city: 'London', temperature: 8.5 },
  { month: 'May', city: 'Tokyo', temperature: 18.4 },
  { month: 'May', city: 'London', temperature: 11.9 },
  { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
  { month: 'Jun', city: 'London', temperature: 15.2 },
  { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
  { month: 'Jul', city: 'London', temperature: 17 },
  { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
  { month: 'Aug', city: 'London', temperature: 16.6 },
  { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
  { month: 'Sep', city: 'London', temperature: 14.2 },
  { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
  { month: 'Oct', city: 'London', temperature: 10.3 },
  { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
  { month: 'Nov', city: 'London', temperature: 6.6 },
  { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
  { month: 'Dec', city: 'London', temperature: 4.8 },
];

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

chart
  .data(data)
  .transform([{ type: 'stackY' }])
  .encode('x', 'month')
  .encode('y', 'temperature')
  .encode('color', 'city')
  .scale('x', {
    range: [0, 1],
  })
  .scale('y', {
    nice: true,
  })
  .axis('y', { labelFormatter: (d) => d + '°C' });

chart.line().encode('shape', 'smooth');

chart.point().encode('shape', 'point').tooltip(false);

chart.render();