Vega-Lite图例筛选时如何重排Y轴仅显示选中资产并居中？

要实现点击图例筛选资产后，Y轴仅显示选中资产并居中，核心是让Y轴的定义域动态绑定到筛选后的数据集，而非原始全量数据。以下是具体实现方案：

关键实现步骤 #

1. 定义图例选择器
   确保选择器类型匹配需求（单选用single，多选用multi），绑定到图例：

   "selection": {
     "assetSelect": {
       "type": "single",
       "fields": ["asset"],
       "bind": "legend"
     }
   }
   

2. 动态筛选数据并绑定Y轴定义域
   通过transform层过滤数据，同时将Y轴的domain设置为筛选后数据的asset字段，实现轴的动态更新：

   "transform": [
     {"filter": {"selection": "assetSelect"}}
   ],
   "encoding": {
     "y": {
       "field": "asset",
       "type": "nominal",
       "domain": {"expr": "data('source_0').map(d => d.asset)"},
       "axis": {"labelAngle": 0}
     },
     "x": {
       "field": "arrival",
       "type": "temporal"
     }
     // 补充departure等其他字段的编码配置
   }
   

3. 自动居中显示
   当仅显示单个选中资产时，Y轴会自动将该资产置于轴的中心位置，无需额外配置。

常见问题修正 #

• 若之前仅在Y轴配置filter，只会隐藏未选中标记但不会修改轴的定义域，必须通过数据层的transform筛选配合轴的动态domain计算才能更新轴。
• 确保选择器的fields与Y轴的field完全一致（如均为asset），避免因字段名不匹配导致筛选失效。

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