Vega-lite：字段出现在错误的图表中？

Question

我在 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"}
        }
    }]
}

结果很简单：

现在，观察当我在第一个图表转换部分 中生成一个新字段“flag”以突出显示特定柱线（Pickups）时会发生什么：

{
    "$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 的工作原理，我是不是误解了一些非常基本的东西？

Answer 1

问题是在复合图表中，Vega-Lite 默认使用共享比例（参见 Scale and Guide Resolution）。

如果你想让你的色阶独立，你可以设置

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

完整的规范如下所示 (view in editor):

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

Vega-lite：字段出现在错误的图表中？

Vega-lite: field appears in the wrong chart?

vega-lite

vega