素食主义者更改选定的酒吧的颜色等级

时间:2020-03-02 19:34:30

标签: vega-lite

我正在尝试使所选的条遵循不同的色标,如下所示 enter image description here

使用此代码

"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

感谢您的帮助!

编辑:我能够根据杰克的答案解决原来的问题,但是,我遇到了另一种代码变体的问题-如显示here--基本上是相同的想法,但是使用刷子-非常感谢您的帮助!

1 个答案:

答案 0 :(得分:3)

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

获得所需行为的一种方法是使用带有过滤器转换的分层图表来覆盖备用编码。这是一个示例(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"}}
}

enter image description here