Vega Lite面积图交叉区域着色异常问题排查求助

问题需求 #

为Vega Lite中Activity（蓝线）和Stops（绿线）两条线的交叉区域正确着色：

• 蓝线位于绿线上方时，两线间区域染红色
• 绿线位于蓝线上方时，两线间区域染绿色
  此前使用transform计算区域，但面积插值效果不符合预期。

错误实现代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "your-data-source.json"},
  "transform": [
    {"fold": ["Activity", "Stops"], "as": ["key", "value"]}
  ],
  "layer": [
    {
      "mark": {"type": "area", "interpolate": "monotone"},
      "encoding": {
        "x": {"field": "time", "type": "temporal"},
        "y": {"field": "value", "type": "quantitative"},
        "color": {"field": "key", "scale": {"range": ["blue", "green"]}}
      }
    }
  ]
}

正确实现代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "your-data-source.json"},
  "transform": [
    {"calculate": "datum.Activity - datum.Stops", "as": "diff"},
    {"window": [{"field": "diff", "as": "prev_diff", "offset": -1}]},
    {"calculate": "datum.diff * datum.prev_diff < 0 ? 'cross' : datum.diff > 0 ? 'above' : 'below'", "as": "position"},
    {"fold": ["Activity", "Stops"], "as": ["key", "value"]},
    {"calculate": "datum.position === 'above' && datum.key === 'Activity' ? datum.value : datum.position === 'below' && datum.key === 'Stops' ? datum.value : null", "as": "upper"},
    {"calculate": "datum.position === 'above' && datum.key === 'Stops' ? datum.value : datum.position === 'below' && datum.key === 'Activity' ? datum.value : null", "as": "lower"}
  ],
  "layer": [
    {
      "mark": {"type": "line", "strokeWidth": 2},
      "encoding": {
        "x": {"field": "time", "type": "temporal"},
        "y": {"field": "value", "type": "quantitative"},
        "color": {"field": "key", "scale": {"range": ["blue", "green"]}}
      }
    },
    {
      "mark": {"type": "area", "fill": "red", "opacity": 0.3},
      "encoding": {
        "x": {"field": "time", "type": "temporal"},
        "y": {"field": "lower", "type": "quantitative"},
        "y2": {"field": "upper", "type": "quantitative"},
        "transform": [{"filter": "datum.position === 'above'"}]
      }
    },
    {
      "mark": {"type": "area", "fill": "green", "opacity": 0.3},
      "encoding": {
        "x": {"field": "time", "type": "temporal"},
        "y": {"field": "lower", "type": "quantitative"},
        "y2": {"field": "upper", "type": "quantitative"},
        "transform": [{"filter": "datum.position === 'below'"}]
      }
    }
  ]
}

核心解决逻辑 #

1. 计算两条线的数值差值，判断Activity与Stops的上下位置关系
2. 通过窗口变换检测相邻数据点的差值符号变化，定位两条线的交叉点
3. 针对不同位置区间，分别生成填充区域的上下边界值
4. 分层绘制基础线条和对应颜色的填充区域，确保交叉区域颜色匹配预期

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