【v5】图例显隐后 elementHighlightByColor 交互永久失效 #5529

问题描述

首次生效效果 <img width="1095" alt="image" src="https://github.com/antvis/G2/assets/1549118/327671ab-c97f-407e-b95d-e715ffb2b1e1">

关闭图例 <img width="1132" alt="image" src="https://github.com/antvis/G2/assets/1549118/997fadbb-cabf-415e-a48f-d9827ed840fa">

再打开图例 <img width="1121" alt="image" src="https://github.com/antvis/G2/assets/1549118/6f76eef3-8021-4f5c-b32b-799462349d5e">

期望结果

图例开关不影响元素高亮效果

如何重现

官方代码修改

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

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

chart.title({
  title: 'Population by age and state',
  subtitle: 'It shows the population of U.S. by age and state.',
});

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
    format: 'csv',
  })
  .transform({ type: 'sortX', by: 'y', reverse: true, slice: 6 })
  .transform({ type: 'dodgeX' })
  .encode('x', 'state')
  .encode('y', 'population')
  .encode('color', 'age')
  .scale('y', { nice: true })
  .axis('y', { labelFormatter: '~s' });

chart
  .state('inactive', { opacity: 0.5 })
  .interaction('tooltip', { shared: true })
  .interaction('elementHighlightByColor', {
    background: true,
    link: false,
  });

chart.render();

额外信息

• G2 5.1.0 版本