基于选择参数切换显示对应Mark及X轴标签的后续技术问题

针对需求，我们可以通过Vega-Lite的条件编码和图层可见性控制来实现。以下是修改后的完整spec：

{
  "data": {
    "values": [
      {"a": "A", "b": "I", "va": 28, "vb": 1},
      {"a": "C", "b": "I", "va": 43, "vb": 2},
      {"a": "D", "b": "II", "va": 91, "vb": 3},
      {"a": "E", "b": "III", "va": 81, "vb": 4}
    ]
  },
  "params": [
    {
      "name": "choice",
      "value": "a",
      "bind": {"input": "radio", "options": ["a", "b"]}
    }
  ],
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "nominal"},
        "y": {"field": "va", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      },
      "visibility": {"condition": {"param": "choice", "value": "a"}, "value": true}
    },
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "b", "type": "nominal"},
        "y": {"field": "vb", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      },
      "visibility": {"condition": {"param": "choice", "value": "b"}, "value": true}
    }
  ],
  "encoding": {
    "x": {
      "type": "nominal",
      "condition": [
        {"param": "choice", "value": "a", "field": "a"},
        {"param": "choice", "value": "b", "field": "b"}
      ]
    }
  }
}

关键修改说明 #

• 图层可见性控制：给每个柱状图层添加visibility属性，通过condition判断choice参数的值，仅当参数匹配时显示对应图层
• X轴动态切换：在顶层encoding中定义X轴的条件编码，根据choice参数自动切换使用的字段，确保X轴标签与当前显示的柱状图匹配
• 保留原有交互配置：沿用原spec中的单选参数设置，保持用户交互逻辑一致

内容的提问来源于stack exchange，提问作者Tom Martens