G2源码解析之图例选取

本文简述G2如何实现点击图例联动数据筛选。

这里回答三个问题

1. 实现图例联动数据筛选的核心逻辑。
2. 如何隐藏/移除数据。
3. 如何显示/新增数据。

结论

实现图例联动数据筛选的核心逻辑

1. 点击图例图元后触发了legend:filter事件。
2. legend模块相应了legend:filter事件，根据图例的筛选状态执行了filter方法。
3. 在filter中根据上下文实例context获取了图表的marks。忽略了legends``marks对其他marks修改了其transform和scale。

如何隐藏/移除/显示/新增数据

由于filter操作本质上是在修改marks修改了其transform和scale, 并没有涉及数据的移除和添加，所以隐藏/显示逻辑其实并无区别。

定位实现代码

核心逻辑

1. 点击图例图元后触发了legend:filter事件。

const click = async (event) => {
  const value = datum(item);
  const index = selectedValues.indexOf(value);
  if (index === -1) selectedValues.push(value);
  else selectedValues.splice(index, 1);
  await filter(selectedValues);
  updateLegendState();

  const { nativeEvent = true } = event;
  if (!nativeEvent) return;
  if (selectedValues.length === items.length) {
    emitter.emit('legend:reset', { nativeEvent });
  } else {
    // Emit events.
    emitter.emit('legend:filter', {
      ...event,
      nativeEvent,
      data: {
        channel,
        values: selectedValues,
      },
    });
  }
};

2. legend模块相应了legend:filter事件，根据图例的筛选状态执行了filter方法。

const onFilter = async (event) => {
  const { nativeEvent } = event;
  if (nativeEvent) return;
  const { data } = event;
  const { channel: specifiedChannel, values } = data;
  if (specifiedChannel !== channel) return;
  selectedValues = values;
  await filter(selectedValues);
  updateLegendState();
};

3. 在filter中根据上下文实例context获取了图表的marks。忽略了legends``marks对其他marks修改了其transform和scale。

async function filterView(
  context, // View instance,
  {
    legend, // Legend instance.
    channel, // Filter Channel.
    value, // Filtered Values.
    ordinal, // Data type of the legend.
    channels, // Channels for this legend.
    allChannels, // Channels for all legends.
    facet = false, // For facet.
  },
) {
  const { view, update, setState } = context;
  setState(legend, (viewOptions) => {
    const { marks } = viewOptions;
    // Add filter transform for every marks,
    // which will skip for mark without color channel.
    const newMarks = marks.map((mark) => {
      if (mark.type === 'legends') return mark;

      // Inset after aggregate transform, such as group, and bin.
      const { transform = [], data = [] } = mark;
      const index = transform.findIndex(
        ({ type }) => type.startsWith('group') || type.startsWith('bin'),
      );
      const newTransform = [...transform];
      if (data.length) {
        newTransform.splice(index + 1, 0, {
          type: 'filter',
          [channel]: { value, ordinal },
        });
      }

      // Set domain of scale to preserve encoding.
      const newScale = Object.fromEntries(
        channels.map((channel) => [
          channel,
          { domain: view.scale[channel].getOptions().domain },
        ]),
      );
      return deepMix({}, mark, {
        transform: newTransform,
        scale: newScale,
        ...(!ordinal && { animate: false }),
        legend: facet
          ? false
          : Object.fromEntries(allChannels.map((d) => [d, { preserve: true }])),
      });
    });
    return { ...viewOptions, marks: newMarks };
  });
  await update();
}