使用 Vega-Lite 中的图例过滤连接图表

Question

我在尝试创建两个按图例 (selection.bind = "legend") 筛选的 concat 版图表时遇到了麻烦。

经过一番摸索之后，我能够将问题简化为以下内容（这是基于文档中的示例之一）：

Example 1 - works as expected - 在图例过滤左侧图表上的显示。（我没有对右侧的图表实施任何过滤。）
Example 2 - does not work - 这里我刚刚交换了两个图表。
我假设现在右边的图表会变成交互式的（即单击图例后将对其进行过滤）。这不起作用。

这是一个错误还是我误解了一些基本概念？

Answer 1

您有两个图表共享相同的图例和两种不同的图例规范（一种交互式，一种非交互式）。当您连接两个图表时，Vega-Lite 默认共享比例和图例，这意味着它必须选择一种图例规范来遵守，而另一种则忽略。图书馆做出的选择是尊重第一个而忽略第二个。这就是为什么图例反映了您的规格最左侧图表中指定的内容的原因。

解决这个问题的方法是将图例颜色解析设置为独立，这样每个图表都指定了自己的图例，并明确将图例设置为 null 以隐藏您不需要图例的图表。修改你的第二个例子（open in editor）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/cars.json"},
  "concat": [
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
        "opacity": {"field": "Cylinders", "type": "nominal", "legend": null}
      }
    },
    {
      "mark": "point",
      "selection": {
        "myCyli": {"type": "multi", "fields": ["Cylinders"], "bind": "legend"}
      },
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
        "opacity": {
          "condition": {
            "selection": "myCyli",
            "field": "Cylinders",
            "type": "ordinal"
          },
          "value": 0
        }
      }
    }
  ],
  "resolve": {"legend": {"opacity": "independent"}}
}

使用 Vega-Lite 中的图例过滤连接图表

Filtering concated charts using legend in Vega-Lite

legend

selection

vega-lite