在设置Y轴scale的type为quantize时, 部分图形不显示,且显示的部分图形与Y轴数据不匹配

[luhaifeng666]

• G2 Version: 4.0.4
• Platform: Chrome 81.0.4044.92（正式版本）（64 位）
• CodePen Link: https://codepen.io/luhaifeng666/pen/vYNBxWo

1、部分图形没有显示出来，具体参照CodePen对应的：1992、1993、1995的数据；
2、图表的显示不符合预期，图形的实际数据与左侧Y轴不对齐,具体参照CodePen对应的：1996、1997、1998、1999的数据。

[hustcc]

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

var data = [
  { year: '1991', value: -3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 }
];

// Step 1: Create Chart Instance
var chart = new Chart({
  container: 'mountNode', // specify container id
  forceFit: true,
  height: 400,
  width: 1000
});

// load data
chart.source(data);
chart.scale('year', {
  range: [0.05, 0.95]
});
chart.scale('value', {
  nice: true,
  type: 'quantize',
  ticks: [-3, 0, 5, 10, 15]
})
chart.tooltip({
  crosshairs: {
    type: 'line'
  }
});

// create line plot
chart.interval().position('year*value');

chart.render();

riddle 可复现。

[pearmini]

看意图是像离散化 y 轴的值。如果是这样：这里不应该设置 ticks，应该是设置归一化的 values（视觉数据，而不是抽象数据）。下面用 5.x 的语法实现：

/**
 * A recreation of this demo: https://observablehq.com/@d3/bar-chart
 */
import { Chart } from '@antv/g2';

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

chart
  .interval()
  .data([
    { year: '1991', value: -3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ])
  .encode('x', 'year')
  .encode('y', 'value')
  .scale('y', {
    nice: true,
    type: 'quantize',
    range: [1, 0.75, 0.5, 0.25, 0],
  });

chart.render();

可以把以上代码复制到这里看效果：https://g2.antv.antgroup.com/examples/general/interval/#column