【v5】shape 通道指定后，legend 位置设置失效

[Deathsteps]

问题描述

期望结果

shape encode 不影响图例位置设置

如何重现

官方示例修改

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

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

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
    format: 'csv',
  })
  .transform({ type: 'stackY' })
  .transform({ type: 'sortX', by: 'y', reverse: true })
  .encode('x', 'state')
  .encode('y', 'population')
  .encode('color', 'age')
  .axis('x', {
    labelSpacing: 4,
    style: {
      labelTransform: 'rotate(90)',
    },
  })
  .encode('shape', 'hollow')
  .legend('color', {
    position: 'bottom',
  })
  .axis('y', { labelFormatter: '~s' });

chart.render();

额外信息

G2 5.0.4

[pearmini]

这确实是一个问题，应该是现在的 legend 是和 color 和 shape 同时绑定了，所以导致配置失效。

[hustcc]

看了代码，当前获取 legend 数据的方式，基本无解，一定会触发 bug。

[Deathsteps]

喵喵叹气

[pearmini]

喵喵叹气

暂时可以这样解决：

// 用 mark.style 代替 mark.shape
chart.interval().style('shape', 'hollow');