Vega多折线图拖动刷选区域后点序错乱，fold方式可正常工作

问题场景 #

我在概览图表下方制作了温度值折线图，通过概览图的brush（刷选）功能控制温度图的显示范围。每条折线采用独立mark配置：

marks: [
  { "type": "line", ... }, // 最高温度折线
  { "type": "line", ... }, // 平均温度折线
  { "type": "line", ... }  // 最低温度折线
]

遇到的问题：将刷选区域向右拖动后再向左拖动，数据点顺序会出现错乱。数据经过brush过滤后，通过collect>sort转换，数据面板显示排序正常，但反向拖动刷选区域时会触发该问题。

尝试过将数据序列fold（折叠）为key|value列的形式，图表可正常工作，但折叠方式会导致标题和坐标轴加粗（推测是叠加渲染导致），因此希望保留独立mark的配置方式。

可行解决方案 #

1. 给每个独立Mark绑定明确排序后的数据源 #

全局的collect>sort转换可能没有被每个独立Mark正确继承，需为每个line Mark单独指定经过排序的数据集：

// 先定义全局转换逻辑，命名数据集
"transform": [
  {"filter": {"selection": "brush"}},
  {"collect": {}, "sort": {"field": "timestamp", "order": "ascending"}}
],
// 每个Mark明确引用转换后的数据集
marks: [
  {
    "type": "line",
    "data": {"name": "transformed_data"},
    "encoding": {"x": {"field": "timestamp"}, "y": {"field": "max_temp"}}
  },
  {
    "type": "line",
    "data": {"name": "transformed_data"},
    "encoding": {"x": {"field": "timestamp"}, "y": {"field": "avg_temp"}}
  },
  {
    "type": "line",
    "data": {"name": "transformed_data"},
    "encoding": {"x": {"field": "timestamp"}, "y": {"field": "min_temp"}}
  }
]

2. 在Brush事件回调中强制排序 #

通过监听brush的结束事件，手动对数据源进行排序后再更新每个Mark，确保无论拖动方向如何，数据始终按时间维度升序排列：

// 示例：假设使用可视化库的事件API
brushSelection.on('end', () => {
  // 获取brush过滤后的原始数据
  let filteredData = getFilteredDataset();
  // 按时间戳强制升序排序
  filteredData = filteredData.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
  // 更新每个折线Mark的数据
  updateMarkData('max_temp_line', filteredData);
  updateMarkData('avg_temp_line', filteredData);
  updateMarkData('min_temp_line', filteredData);
});

3. 修复Fold方式的渲染问题（备选） #

如果愿意尝试fold方案，可通过以下方式解决标题和坐标轴加粗问题：

• 移除每个Mark中重复的标题、坐标轴配置，只保留一份全局配置
• 固定Mark的stroke-width属性，避免叠加渲染导致的线条/文本加粗
• 检查图层层级，确保坐标轴元素只渲染一次

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