如何使用D3根据多选世界杯小组筛选多维数组数据？

算力阿峰

2026-5-28

解决D3多选世界杯小组的通用筛选方案

嘿，我来帮你搞定这个多选筛选的问题！你遇到的核心问题是单选时的判断逻辑没法适配多选场景，手动写||又太不灵活，其实用JavaScript数组的includes()方法就能完美解决这个通用筛选的需求。

问题分析

你之前的筛选逻辑d[0] == cupsArray其实有两个小问题：

你的new_array结构是[country, cup, timezone]，所以cup对应的是数组的第2个元素（索引为1），不是第1个（索引0）；
单选时cupsArray是长度为1的数组，直接用==比较字符串和数组其实是不严谨的，只是碰巧可能在某些场景下生效，但多选时完全不适用。

通用解决方案

我们可以用Array.includes()方法来判断当前元素的cup值是否存在于选中的小组数组cupsArray中，这个方法支持任意长度的数组，完美实现“或”的筛选逻辑：

// 筛选出cup在选中小组数组中的元素
var filteredArray = new_array.filter(function(d) {
  // d[1]对应new_array中的cup字段
  return cupsArray.includes(d[1]);
});

补充优化：处理空选择的情况

如果用户没有选中任何小组，上面的逻辑会返回空数组，你可以加个判断，返回全部数据或者给出提示：

var filteredArray;
if (cupsArray.length === 0) {
  // 未选中任何小组，返回全部数据（用扩展运算符避免原数组被修改）
  filteredArray = [...new_array];
} else {
  filteredArray = new_array.filter(function(d) {
    return cupsArray.includes(d[1]);
  });
}