如何在Vega-Lite折线图中按Y轴阈值设置渐变颜色？

可以实现，核心思路是将Y轴的具体阈值转换为gradient所需的0-1比例offset，或者采用分层折线的方式直接拆分数据渲染。以下是两种可行方案：

方案一：动态计算Gradient Offset比例 #

利用Vega的比例尺API，将Y轴阈值转换为对应0-1范围的offset值，步骤如下：

1. 通过scale('y')获取Y轴的比例尺对象，其domain()方法返回Y轴的最小值和最大值；
2. 用公式(阈值 - Y轴最小值) / (Y轴最大值 - Y轴最小值)计算阈值对应的比例offset；
3. 在gradient的stops中用signal动态注入计算结果。

修改后的Gradient定义示例：

"color": {
  "x1": 1,
  "y1": 1,
  "x2": 1,
  "y2": 0,
  "gradient": "linear",
  "stops": [
    {
      "offset": 0,
      "color": "red"
    },
    {
      "offset": {"signal": "(50 - scale('y').domain()[0]) / (scale('y').domain()[1] - scale('y').domain()[0])"},
      "color": "red"
    },
    {
      "offset": {"signal": "(50 - scale('y').domain()[0]) / (scale('y').domain()[1] - scale('y').domain()[0])"},
      "color": "blue"
    },
    {
      "offset": 1,
      "color": "blue"
    }
  ]
}

注：上述示例中阈值为50，可根据需求替换为具体数值；若Y轴定义域固定，也可直接手动计算比例值填入offset。

方案二：分层折线拆分渲染 #

通过数据筛选将折线拆分为高于阈值和低于阈值两部分，分别渲染并设置颜色，无需计算比例。示例配置：

{
  "data": {"values": [/* 你的数据 */]},
  "layer": [
    // 低于阈值的折线
    {
      "transform": [{"filter": "datum.y < 50"}],
      "mark": "line",
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {"field": "y", "type": "quantitative"},
        "color": {"value": "red"}
      }
    },
    // 高于阈值的折线
    {
      "transform": [{"filter": "datum.y >= 50"}],
      "mark": "line",
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {"field": "y", "type": "quantitative"},
        "color": {"value": "blue"}
      }
    }
  ]
}

该方案优势是直观易维护，若数据点跨越阈值导致折线断开，可通过添加辅助点补全连接（如在阈值位置插入过渡数据点）。

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