antvis / G2

📊 The concise and progressive visualization grammar.
https://g2.antv.antgroup.com
MIT License
12.07k stars 1.58k forks source link

在使用 空间复合 的时候,legend 点击报错 无效果 #6240

Open lcldyh opened 3 months ago

lcldyh commented 3 months ago

xiaolong01

https://g2.antv.antgroup.com/zh/examples/composition/space#space-layer

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

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

const scaleColor = (node) =>
  node.scale('color', {
    palette: 'cool',
    offset: (t) => t * 0.8 + 0.1,
  });

const layer = chart.spaceLayer().data({
  type: 'fetch',
  value:
    'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  format: 'csv',
});

layer
  .interval()
  .transform({ type: 'sortX', reverse: true, by: 'y' })
  .encode('x', 'letter')
  .encode('y', 'frequency')
  .encode('color', 'letter')
  .call(scaleColor);

layer
  .interval()
  .attr('x', 300)
  .attr('y', 50)
  .attr('width', 300)
  .attr('height', 300)
  .coordinate({ type: 'theta' })
  .transform({ type: 'stackY' })
  .legend(false)
  .scale('color', {
    palette: 'cool',
    offset: (t) => t * 0.8 + 0.1,
  })
  .encode('y', 'frequency')
  .encode('color', 'letter')
  .call(scaleColor);

chart.render();
CullenNg commented 2 months ago

并且使用 legend:filte 交互的时候会把所有的 legend 都干没了;

chart.emit('legend:filter', { data: { channel: 'color', values: ['Sports', 'Strategy'] }, });