vega-lite 更改所选条形图的色标

Question

我正在尝试使所选条形遵循不同的色阶，如下所示

使用此代码

"color": {
      "condition": {
          "test": {
            "and": [{"selection": "select"}, "length(data(\"select_store\"))"]
          },
          "field": "is_overview",
          "type": "nominal",
          "scale": {"range": ["red", "yellow"], "domain": [false, true]},
          "legend": null
        },
        "field": "is_overview",
        "type": "nominal",
        "scale": {"range": ["blue", "#9FB3C8"], "domain": [false, true]},
        "legend": null
    },

但是好像没什么作用

这里是 link to full code on vega editor.

感谢您的帮助！

编辑：我能够根据 Jake 的回答解决原始问题，但是，我运行进入另一个问题以获得代码的变体---如图 here---它基本上是相同的想法，但使用刷子---非常感谢您的帮助！

Answer 1

单个通道不可能有两种不同的编码：通道条件只能在编码和静态值之间或在两个静态值之间切换。

获得所需行为的一种方法是使用带有过滤器转换的分层图表来覆盖备用编码。这是一个例子 (vega editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Midas Generated Visualization of dataframe STATE_distribution",
  "data": {
    "values": [
      {"STATE": "AK", "count": 2, "is_overview": true},
      {"STATE": "AL", "count": 173, "is_overview": true},
      {"STATE": "AR", "count": 63, "is_overview": true},
      {"STATE": "AZ", "count": 193, "is_overview": true},
      {"STATE": "CA", "count": 373, "is_overview": true},
      {"STATE": "CO", "count": 152, "is_overview": true},
      {"STATE": "FL", "count": 139, "is_overview": true},
      {"STATE": "AK", "count": 1, "is_overview": false},
      {"STATE": "AL", "count": 73, "is_overview": false},
      {"STATE": "AR", "count": 23, "is_overview": false},
      {"STATE": "AZ", "count": 93, "is_overview": false},
      {"STATE": "CA", "count": 73, "is_overview": false},
      {"STATE": "CO", "count": 52, "is_overview": false},
      {"STATE": "FL", "count": 39, "is_overview": false}
    ]
  },
  "encoding": {
    "x": {"field": "STATE", "type": "ordinal"},
    "y": {"field": "count", "type": "quantitative", "stack": null},
    "opacity": {"value": 0.5},
    "stroke": {"value": "#F0B429"}
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "color": {
          "field": "is_overview",
          "type": "nominal",
          "scale": {"range": ["blue", "#9FB3C8"], "domain": [false, true]},
          "legend": null
        },
        "strokeWidth": {"value": 0}
      },
      "selection": {
        "select": {"type": "multi", "encodings": ["x"], "empty": "none"}
      }
    },
    {
      "mark": "bar",
      "transform": [{"filter": {"selection": "select"}}],
      "encoding": {
        "color": {
          "field": "is_overview",
          "type": "nominal",
          "scale": {"range": ["red", "yellow"], "domain": [false, true]},
          "legend": null
        },
        "strokeWidth": {"value": 3}
      }
    }
  ],
  "resolve": {"scale": {"color": "independent"}}
}

vega-lite 更改所选条形图的色标

vega-lite change color scale of selected bars

vega-lite