本文简述G2如何实现点击图例联动数据筛选。
这里回答三个问题
- 实现图例联动数据筛选的核心逻辑。
- 如何隐藏/移除数据。
- 如何显示/新增数据。
结论
实现图例联动数据筛选的核心逻辑
- 点击图例图元后触发了
legend:filter
事件。 legend
模块相应了legend:filter
事件,根据图例的筛选状态执行了filter
方法。- 在
filter
中根据上下文实例context
获取了图表的marks
。忽略了legends``marks
对其他marks
修改了其transform
和scale
。
如何隐藏/移除/显示/新增数据
由于filter
操作本质上是在修改marks
修改了其transform
和scale
, 并没有涉及数据的移除和添加,所以隐藏/显示逻辑其实并无区别。