Vega-lite：根据选择自定义轴样式

Question

我正在尝试根据选择自定义轴标签的样式，这意味着该标签是否包含在选择中。

从此演示规范 (Open the Chart in the Vega Editor) 开始，选择按预期工作，突出显示所选柱：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      { "model": "Sedan",                 "sales": 12 },
      { "model": "Coupe",                 "sales": 10 },
      { "model": "Sports car",            "sales": 35 },
      { "model": "Station wagon",         "sales": 69 },
      { "model": "Hatchback",             "sales": 91 },
      { "model": "Convertible",           "sales": 53 },
      { "model": "Sport-utility vehicle", "sales": 14 },
      { "model": "Minivan",               "sales": 48 }
    ]
  },
  "mark": "bar",
  "selection": {
    "select_model": { "type": "single", "fields": ["model"] }
  },
  "encoding": {
    "y": { "field": "model" },
    "x": { "field": "sales", "type": "quantitative" },
    "fillOpacity": {
      "value": 0.3,
      "condition": { "selection": "select_model", "value": 1 }
    }
  }
}

但我也想突出显示轴标签（并可能接受对它们的点击？我不确定这是否可能）

如果我尝试用这个替换 Y 编码：

"y": { 
  "field": "model",
  "axis": {
    "labelOpacity": {
      "value": 0.3,
      "condition": { 
        "test": { "selection": "select_model" }, 
        "value": 1 
      }
    }
  }
}

我收到以下错误：

Cannot read property 'getSelectionComponent' of null

我做错了什么？

Answer 1

您的方法不起作用的原因是比例标签从未包含在选择中。您可以通过使用 vega expression 显式测试标签是否存在于所选值中来完成您想要的操作。它可能看起来像这样：

      "axis": {
        "labelOpacity": {
          "value": 0.3,
          "condition": {
            "test": "indexof(select_model.model || [], datum.value) >= 0",
            "value": 1
          }
        }
      }

这是完整的结果 (view in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"model": "Sedan", "sales": 12},
      {"model": "Coupe", "sales": 10},
      {"model": "Sports car", "sales": 35},
      {"model": "Station wagon", "sales": 69},
      {"model": "Hatchback", "sales": 91},
      {"model": "Convertible", "sales": 53},
      {"model": "Sport-utility vehicle", "sales": 14},
      {"model": "Minivan", "sales": 48}
    ]
  },
  "mark": "bar",
  "selection": {
    "select_model": {"type": "single", "fields": ["model"], "empty": "none"}
  },
  "transform": [
    {"calculate": "indexof(select_model.model || [], 'Hatchback')", "as": "Val"}
  ],
  "encoding": {
    "y": {
      "field": "model",
      "axis": {
        "labelOpacity": {
          "value": 0.3,
          "condition": {
            "test": "indexof(select_model.model || [], datum.value) >= 0",
            "value": 1
          }
        }
      }
    },
    "x": {"field": "sales", "type": "quantitative"},
    "fillOpacity": {
      "value": 0.3,
      "condition": {"selection": "select_model", "value": 1}
    }
  }
}

Vega-lite：根据选择自定义轴样式

Vega-lite: customize axis style based on selection

vega-lite

vega