Блог

Я вижу странное поведение в Vega Lite, которое я не понимаю.

Возьмите этот пример диаграммы:

 {
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "values": [
            {"model": "Sedan",   "color": "Red",    "sales": 28},
            {"model": "Sedan",   "color": "Silver", "sales": 17},
            {"model": "Sedan",   "color": "Black",  "sales": 34},
            {"model": "Pickup",  "color": "Red",    "sales": 20},
            {"model": "Pickup",  "color": "Silver", "sales": 71},
            {"model": "Pickup",  "color": "Black",  "sales": 14},
            {"model": "Minivan", "color": "Red",    "sales": 52},
            {"model": "Minivan", "color": "Silver", "sales": 31},
            {"model": "Minivan", "color": "Black",  "sales": 45}
        ]
    },
    "concat": [{
        "mark": "bar",
        "encoding": {
            "x": {"field": "model"},
            "y": {"aggregate": "sum", "field": "sales"}
        }
    },{
        "mark": "arc",
        "encoding": {
            "color": {"field": "color"},
            "theta": {"aggregate": "sum", "field": "sales"}
        }
    }]
}
  

Результат достаточно прост:

Теперь посмотрите, что происходит, когда я создаю новое поле «флаг» в разделе преобразования первой диаграммы, чтобы выделить определенную полосу (пикапы):

 {
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "values": [
            {"model": "Sedan",   "color": "Red",    "sales": 28},
            {"model": "Sedan",   "color": "Silver", "sales": 17},
            {"model": "Sedan",   "color": "Black",  "sales": 34},
            {"model": "Pickup",  "color": "Red",    "sales": 20},
            {"model": "Pickup",  "color": "Silver", "sales": 71},
            {"model": "Pickup",  "color": "Black",  "sales": 14},
            {"model": "Minivan", "color": "Red",    "sales": 52},
            {"model": "Minivan", "color": "Silver", "sales": 31},
            {"model": "Minivan", "color": "Black",  "sales": 45}
        ]
    },
    "concat": [{
        "mark": "bar",
        "transform": [
            {"calculate": "datum.model == 'Pickup'", "as": "flag"}   // <- "flag" defined here
        ],
        "encoding": {
            "x": {"field": "model"},
            "y": {"aggregate": "sum", "field": "sales"},
            "color": {"field": "flag"}                               // <- and used here
        }
    },{
        "mark": "arc",                                               // <- the second chart
        "encoding": {                                                //    shouldn't even see
            "color": {"field": "color"},                             //    the new "flag" field
            "theta": {"aggregate": "sum", "field": "sales"}          //
        }
    }]
}
  

Флаг работает (выделена панель захвата), но, хотя я определил его в контексте первой диаграммы, он влияет на вторую диаграмму и ее легенду:

Это ошибка? Я неправильно понял что-то очень простое в том, как работает Vega Lite?

Проблема в том, что в составных диаграммах Vega-Lite по умолчанию использует общие масштабы (см. Раздел Масштабирование и разрешение направляющих).

Если вы хотите, чтобы ваши цветовые шкалы были независимыми, вы можете установить

   "resolve": {"scale": {"color": "independent"}}
  

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

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"model": "Sedan", "color": "Red", "sales": 28},
      {"model": "Sedan", "color": "Silver", "sales": 17},
      {"model": "Sedan", "color": "Black", "sales": 34},
      {"model": "Pickup", "color": "Red", "sales": 20},
      {"model": "Pickup", "color": "Silver", "sales": 71},
      {"model": "Pickup", "color": "Black", "sales": 14},
      {"model": "Minivan", "color": "Red", "sales": 52},
      {"model": "Minivan", "color": "Silver", "sales": 31},
      {"model": "Minivan", "color": "Black", "sales": 45}
    ]
  },
  "concat": [
    {
      "mark": "bar",
      "transform": [{"calculate": "datum.model == 'Pickup'", "as": "flag"}],
      "encoding": {
        "x": {"field": "model"},
        "y": {"aggregate": "sum", "field": "sales"},
        "color": {"field": "flag"}
      }
    },
    {
      "mark": "arc",
      "encoding": {
        "color": {"field": "color"},
        "theta": {"aggregate": "sum", "field": "sales"}
      }
    }
  ],
  "resolve": {"scale": {"color": "independent"}}
}