如何将 Recharts 图表与非 Recharts 图表的自定义内容同步

Question

目前，您可以使用 syncId 属性轻松同步两个图表，例如 in this fiddle.

我想用 D3 在 Recharts 范围之外设计一些东西。是否可以捕获事件或回调，让我可以像两个 Recharts 组件一样同步我的自定义组件？

谢谢

Answer 1

抱歉，问题问得太快了，请花时间深入搜索。 AFAIK，这不是写在文档中和鼓励的东西，但你完全可以依靠内部事件发射器来监听同步事件并触发同步事件。

我的代码

import { eventCenter, SYNC_EVENT } from 'recharts/lib/util/Events';

// [...]

eventCenter.on(SYNC_EVENT, (cId, chartId, data) => {
  console.log(cId, chartId, data);
});

// [...]

灵感来自 the actual component behaviour here

Answer 2

@guillaumepotier，你测试过你的方法了吗？

据我所知，您不能在导入 eventCenter 后触发事件，因为您不会获得与 recharts 图表相同的实例。每次导入 returns 一个新的 eventcenter 实例，所以即使你触发了事件，图表也不会收到它，因为它不是同一个 eventcenter。

如何将 Recharts 图表与非 Recharts 图表的自定义内容同步

How to sync Recharts chart with something custom that is not a Recharts graph

javascript

reactjs

recharts