如何在Observable Plot中用隐藏键实现多图表交叉筛选？

报错原因说明 #

你遇到的「Error: Unrecognized param type: intervalX」是因为Observable Plot的选择器类型中不存在intervalX这个选项。合法的选择器类型包括point（离散点选择）、brushX/brushY（轴方向区间选择）、interval（自定义字段区间选择）等，需根据你的筛选场景选择正确类型。

核心实现思路 #

要基于隐藏的KEY字段实现跨图表交叉筛选，关键是让所有图表的选择器关联KEY字段，而非可视化轴上的Yearmonth/Supplier等字段，再通过选中的KEY集合过滤所有关联数据集。

具体实现步骤与代码示例 #

1. 定义共享选择器

创建一个基于KEY字段的共享选择器，支持多选（适合离散的KEY值场景）：

// 创建点选择器，关联KEY字段，允许多选
const keySelection = Plot.select({
  type: "point",
  fields: ["KEY"],
  multiple: true
});

2. 为柱状图配置选择与筛选逻辑

以两个关联的柱状图为例，分别基于Yearmonth和Supplier展示数据，但筛选逻辑绑定KEY：

第一个图表（按Yearmonth展示）

Plot.plot({
  marks: [
    Plot.bar(dataSet1, {
      x: "Yearmonth",
      y: "Value",
      // 选中项高亮
      fill: keySelection.fill(() => "#6366f1", { active: "#f59e0b" }),
      // 绑定共享选择器
      selection: keySelection,
      // 基于KEY字段筛选
      filter: keySelection.filter()
    })
  ]
});

第二个图表（按Supplier展示）

Plot.plot({
  marks: [
    Plot.bar(dataSet1, {
      x: "Supplier",
      y: "Value",
      fill: keySelection.fill(() => "#6366f1", { active: "#f59e0b" }),
      selection: keySelection,
      filter: keySelection.filter()
    })
  ]
});

3. 跨数据集筛选（关联其他包含KEY的数据集）

如果有第二个独立数据集dataSet2（同样包含KEY字段），通过选中的KEY集合过滤该数据集：

Plot.plot({
  marks: [
    Plot.bar(dataSet2, {
      x: "Category",
      y: "Sales",
      fill: keySelection.fill(() => "#6366f1", { active: "#f59e0b" }),
      // 手动判断当前数据行的KEY是否在选中集合中
      filter: (d) => keySelection.selected().includes(d.KEY)
    })
  ]
});

4. 结合Crossfilter优化大数据场景

如果数据集较大，可结合D3 Crossfilter提升筛选性能：

// 初始化Crossfilter，创建KEY维度
const cf = crossfilter(dataSet1);
const keyDim = cf.dimension(d => d.KEY);

// 监听选择器变化，同步过滤规则
keySelection.addEventListener("input", () => {
  const selectedKeys = keySelection.selected();
  if (selectedKeys.length === 0) {
    keyDim.filterAll();
  } else {
    keyDim.filter(d => selectedKeys.includes(d));
  }
  // 获取过滤后的数据集，用于更新图表
  const filteredData = keyDim.top(Infinity);
  // 触发图表重绘（Observable中可通过变量自动响应）
});

关键注意事项 #

• 选择器类型匹配：如果KEY是离散值，优先用point选择器；如果是连续值，可使用interval或brushX/brushY（需对应字段配置）。
• 字段关联：所有图表的选择器必须指定fields: ["KEY"]，确保选择逻辑绑定隐藏键而非轴字段。
• 响应式更新：在Observable Notebook中，使用viewof声明选择器可自动实现状态同步，无需手动监听事件。

内容的提问来源于stack exchange，提问作者Thi Mai Ho