[Bug]: 复合视图图例表现错乱

[yshenhua]

Describe the bug / 问题描述

我用复合视图绘制了多个饼图，点击某个饼图的图例会影响其他饼图，并且其他饼图的图例消失。

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

示例代码：

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

const data = [
  { group: "一组", item: "工作一", percent: 10 },
  { group: "一组", item: "工作二", percent: 20 },
  { group: "一组", item: "工作三", percent: 30 },
  { group: "一组", item: "工作四", percent: 20 },
  { group: "一组", item: "工作五", percent: 20 },
  { group: "二组", item: "工作一", percent: 45 },
  { group: "二组", item: "工作二", percent: 25 },
  { group: "二组", item: "工作三", percent: 20 },
  { group: "二组", item: "工作四", percent: 5 },
  { group: "二组", item: "工作五", percent: 5 },
];

const chart = new Chart({ container: "container", width: 1200, height: 400 });
const spaceFlex = chart.spaceFlex();

spaceFlex
  .interval()
  .style({ stroke: 'white' })
  .coordinate({ type: "theta" })
  .title({ title: '一组工作情况', align: 'center' })
  .data(data.filter((item) => item.group === "一组"))
  .transform({ type: "stackY" })
  .encode("y", "percent")
  .encode("color", "item")
  .label({ position: "outside", text: (d) => `${d.item}: ${d.percent}%` })
  .legend({ color: { position: "bottom", layout: { justifyContent: "center" } } });

spaceFlex
  .interval()
  .style({ stroke: 'white' })
  .coordinate({ type: "theta" })
  .title({ title: '二组工作情况', align: 'center' })
  .data(data.filter((item) => item.group === "二组"))
  .transform({ type: "stackY" })
  .encode("y", "percent")
  .encode("color", "item")
  .label({ position: "outside", text: (d) => `${d.item}: ${d.percent}%` })
  .legend({ color: { position: "bottom", layout: { justifyContent: "center" } } });

chart.render();

渲染完后：

随便点击一下图例后：

Version / 版本

🆕 5.x

OS / 操作系统

• [ ] macOS
• [x] Windows
• [ ] Linux
• [ ] Others / 其他

Browser / 浏览器

• [x] Chrome
• [ ] Edge
• [ ] Firefox
• [ ] Safari (Limited support / 有限支持)
• [ ] IE (Nonsupport / 不支持)
• [ ] Others / 其他

[interstellarmt]

目前空间复合的交互有点问题，两个饼图共享同一个全局的事件导致冲突了。 建议直接用两个容器绘制两个图作为替代方案。