Vega-Lite标记未按指定显示颜色问题求助

你当前设置的threshold颜色比例尺，分割点[2,3]会把数值划分为三个区间：(-∞, 2)、[2, 3)、[3, +∞)。但你的数据中d是整数1、2、3，这种分割方式会导致部分数值的颜色匹配出现偏差，进而出现非预期的浅红色调。

以下两种方案可以解决这个问题，确保只显示你指定的三种颜色：

方案一：将d视为分类数据映射颜色 #

把d的字段类型改为nominal（分类），直接为每个指定值绑定对应颜色，避免比例尺的区间计算偏差：

"color": {
  "field": "d",
  "type": "nominal",
  "scale": {
    "domain": [1, 2, 3], // 明确指定数据中的取值
    "range": ["#FF0000", "#FBFF00", "#00FF00"] // 对应颜色
  },
  "legend": {"title": "Threshold"}
}

方案二：调整阈值分割点适配整数取值 #

如果需要保留quantitative（定量）类型，把阈值分割点设为整数中间值，让每个d的整数值都落在独立区间内：

"color": {
  "field": "d",
  "type": "quantitative",
  "scale": {
    "type": "threshold",
    "domain": [1.5, 2.5], // 分割点设为整数中间值
    "range": ["#FF0000", "#FBFF00", "#00FF00"]
  },
  "legend": {"title": "Threshold"}
}

完整修正代码（方案一） #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Horizontally concatenated charts that show different types of discretizing scales.",
  "data": {
    "values": [
      {"a": "A", "b": 2020, "c": 11, "d": 3},
      {"a": "A", "b": 2020, "c": 40.2, "d": 3},
      {"a": "A", "b": 2021, "c": 40.2, "d": 2},
      {"a": "A", "b": 2022, "c": 70.2, "d": 1},
      {"a": "B", "b": 2020, "c": 20.2, "d": 1},
      {"a": "B", "b": 2021, "c": 20.2, "d": 2},
      {"a": "B", "b": 2021, "c": 20.2, "d": 2},
      {"a": "B", "b": 2022, "c": 20.2, "d": 1},
      {"a": "C", "b": 2021, "c": 20.2, "d": 1},
      {"a": "C", "b": 2022, "c": 20.2, "d": 1},
      {"a": "C", "b": 2022, "c": 20.2, "d": 1}
    ]
  },
  "mark": "circle",
  "encoding": {
    "y": {
      "field": "a",
      "type": "nominal",
      "sort": null,
      "axis": {"ticks": false, "domain": false, "title": null}
    },
    "x": {"field": "b", "type": "ordinal"},
    "size": {
      "field": "b",
      "type": "quantitative",
      "scale": {
        "type": "threshold",
        "domain": [30, 70],
        "range": [80, 200, 320]
      }
    },
    "color": {
      "field": "d",
      "type": "nominal",
      "scale": {
        "domain": [1, 2, 3],
        "range": ["#FF0000", "#FBFF00", "#00FF00"]
      },
      "legend": {"title": "Threshold"}
    }
  },
  "resolve": {"scale": {"color": "independent", "size": "independent"}}
}

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