feat(line): add trail shape

[pearmini]

Trail

• 给 Line Mark 增加 trail shape：close 可以实现类似vega-lite中mark为trail的大小不断变化的线条吗？如图 #5124
• 修复 facet 不能设置连续比例尺的问题：close 5.x的分面图color设置连续型，但是图例却是离散的，4.x的图例是连续的，5.x以后会修改成和4.x的一致吗 #5136

设计

其余的 Line 的 Shape 是把所有点连接成一条线，但是 Trail 是在相邻的两个点之间画一个类似于笔触的形状，然后拼接成一条宽度变化的线。

案例

export function stocksLineVarSize(): G2Spec {
  return {
    type: 'line',
    data: {
      type: 'fetch',
      value: 'data/stocks.csv',
    },
    encode: {
      x: (d) => new Date(d.date),
      y: 'price',
      color: 'symbol',
      size: 'price',
    },
    legend: { size: false },
    style: { shape: 'trail' },
  };
}

export async function barleyLineTrail(): Promise<G2Spec> {
  const data = await csv('data/barley.csv', autoType);
  const key = (d) => `${d.site},${d.variety}`;
  const keyDelta = rollup(
    data,
    ([a, b]) => {
      if (b.year < a.year) [a, b] = [b, a];
      return b.yield - a.yield;
    },
    key,
  );
  return {
    type: 'facetRect',
    data,
    paddingLeft: 120,
    paddingBottom: 100,
    encode: { x: 'site' },
    children: [
      {
        type: 'line',
        frame: false,
        encode: {
          x: (d) => `${d.year}`,
          y: 'variety',
          series: 'variety',
          color: (d) => keyDelta.get(key(d)),
          size: 'yield',
        },
        tooltip: { title: '', items: [{ field: 'year' }, { field: 'yield' }] },
        legend: { size: false, color: { title: 'yield delta' } },
        scale: {
          size: { range: [0, 12] },
          color: { palette: 'rdBu' },
        },
        style: { shape: 'trail' },
        interaction: { tooltip: { series: false } },
      },
    ],
  };
}

TODO

• code
• tests
• demo
• docs