如何在Vega-Lite的repeat迭代中根据当前值动态配置属性？

要实现根据repeat迭代值设置不同属性，核心是在表达式中正确获取当前的迭代项，具体方法如下：

1. 正确获取当前迭代值 #

在Vega-Lite的表达式中，不能直接使用repeat变量，需要通过repeat(repeat类型)函数来获取当前迭代的内容。比如你这里用的是layer类型的repeat，就用repeat('layer')来拿到当前迭代的字段名（'Act'或'PY'）。

2. 修正颜色设置 #

你代码里的颜色表达式有误，修改后就能根据迭代字段设置不同颜色：

"color": {"value": {"expr": "repeat('layer') === 'Act' ? 'black' : 'red'"}}

3. 完整修正代码 #

{ 
  "height": {"step": 40},
  "width": 200,
  "data": {
    "name": "thedata",
    "values": [
      {"region": "Europe" , "Act": 11000, "PY": 9000, "Plan": 10000},
      {"region": "Asia" , "Act": 17000, "PY": 16000, "Plan": 18000},
      {"region": "Americas" , "Act": 19000, "PY": 14000, "Plan": 12000},
      {"region": "Australia" , "Act": 13000, "PY": 14000, "Plan": 12000}
    ]
  },
  "repeat": {
    "layer": ["Act", "PY"]
  },
  "spec": { 
    "mark": {
      "type": "bar",
      "fillOpacity": 1,
      "height": {"band": 0.7}
    },
    "encoding": {
      "y": { 
        "field": "region", 
        "type": "nominal",
        "sort": {"field": "Act", "order": "descending"}
      },
      "yOffset": {"expr": "repeat('layer') === 'Act' ? -5 : 5"}, // 可根据迭代值设置偏移
      "x": {
        "field": {"repeat": "layer"}, 
        "type": "quantitative", 
        "axis": {"grid": false}
      },
      "color": {"value": {"expr": "repeat('layer') === 'Act' ? 'black' : 'red'"}}
    }
  }
}

4. 扩展其他属性设置 #

除了颜色，你还可以用同样的方式设置更多属性，比如：

• 调整条形填充透明度："fillOpacity": {"expr": "repeat('layer') === 'Act' ? 1 : 0.7"}
• 修改条形高度："height": {"expr": "repeat('layer') === 'Act' ? {band:0.7} : {band:0.5}"}
• 自定义轴标题："axis": {"title": {"expr": "repeat('layer') === 'Act' ? '实际值' : '去年值'"}}

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