Фильтрация связанных графиков с использованием легенды в Vega-Lite

Question

Я попал в ловушку, пытаясь создать две concat -эд диаграммы, отфильтрованные по легенде (selection.bind = "legend").

После небольшого почесывания головы я смог уменьшить проблему до следующего (это основан на одном из примеров в документации):

1. Пример 1 - работает как ожидалось - щелчок по номеру цилиндра на легенде фильтрует отображение слева диаграмма. (Я не реализовал никакой фильтрации для графика справа.)

2. Пример 2 - не работает - Здесь я только что поменял местами две диаграммы.
   Я предполагал, что теперь диаграмма справа станет интерактивной (то есть будет отфильтрована после нажатия на легенду). Это не работает.

Это ошибка или я неправильно понимаю основную концепцию c?

Answer 1

У вас есть две диаграммы с одной и той же легендой и две разные спецификации легенды (одна интерактивная, другая нет). Когда вы объединяете две диаграммы, Vega-Lite по умолчанию делит шкалы и условные обозначения, что означает, что он должен выбрать одну из спецификаций легенды для соблюдения и одну для игнорирования. Выбор, который делает библиотека, состоит в том, чтобы соблюдать первое и игнорировать второе. Вот почему легенда отражает все, что указано в самой левой диаграмме вашей спецификации.

Обходной способ - установить независимое разрешение цвета легенды, чтобы каждая диаграмма указывала собственную легенду и явно установите легенду на ноль, чтобы скрыть ее для диаграммы, для которой легенда не нужна. Изменение вашего второго примера ( открыть в редакторе ):

{
  "$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"}}
}