如何在Deneb中对面积图进行条件格式设置？

你遇到的问题确实和Vega-Lite对面积图与条形图的颜色编码逻辑差异有关：

• 条形图的每个条形是独立标记对象，对应单条数据，color的条件判断可直接作用于每个条形。
• 面积图是将所有数据点连接成的连续区域，默认color编码作用于整个系列而非单个数据点，因此直接在color里基于datum的条件判断无法生效。

要实现面积图的条件格式，推荐通过**分层（Layer）**分别绘制正常范围和超出范围的区域，以下是可行的配置示例：

{
  "layer": [
    // 绘制正常范围内的面积
    {
      "mark": {
        "type": "area",
        "filled": true,
        "tooltip": true
      },
      "transform": [
        {"filter": "datum['Amount'] <= datum['Max $'] && datum['Amount'] >= datum['Min $']"}
      ],
      "encoding": {
        "x": {
          "field": "Date Dt",
          "type": "temporal",
          "axis": {"format": "%d-%b"}
        },
        "y": {
          "field": "Amount",
          "type": "quantitative",
          "axis": {"format": "~s"}
        },
        "color": {"value": "green"}
      }
    },
    // 绘制超出范围的面积
    {
      "mark": {
        "type": "area",
        "filled": true,
        "tooltip": true
      },
      "transform": [
        {"filter": "datum['Amount'] > datum['Max $'] || datum['Amount'] < datum['Min $']"}
      ],
      "encoding": {
        "x": {
          "field": "Date Dt",
          "type": "temporal",
          "axis": {"format": "%d-%b"}
        },
        "y": {
          "field": "Amount",
          "type": "quantitative",
          "axis": {"format": "~s"}
        },
        "color": {"value": "rgb(255, 110, 100)"}
      }
    }
  ]
}

如果需要保留统一的tooltip体验，可以在图层配置中添加resolve属性合并tooltip内容，确保交互逻辑连贯。

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