Vega-lite图例用于多字段数据

Question

我的数据格式中每个x都有多个字段：

x1 f1 f2 f3
x2 f4 f5 f6
...

因此，我可以使用具有自定义格式的工具提示（显示单个x的所有值），并可以为每个字段自定义标记。 link to sample。

我想添加一个图例以显示颜色的含义，但是我无法为多个字段自动生成颜色。我当时正在考虑添加第二个数据集，这些数据集具有用于字段和颜色的离散值（类似this），但是显然您不能将多个集合添加到vega-lite中，而且我也不了解该如何移动到纯维加。这可能吗？

Answer 1

从多列生成图例的最佳方法是使用Fold Transform将它们折叠成一列，然后让编码为您处理图例。修改链接到的示例，它看起来可能像这样：（vega editor link）：

{
  "data": {"url": "data/seattle-weather.csv", "format": {"type": "csv"}},
  "encoding": {
    "x": {"timeUnit": "yearmonthdate", "field": "date", "type": "temporal"},
    "tooltip": [
      {"timeUnit": "yearmonthdate", "field": "date", "type": "temporal"},
      {"field": "temp_max", "type": "quantitative"},
      {"field": "temp_min", "type": "quantitative"}
    ]
  },
  "layer": [
    {
      "transform": [
        {"fold": ["temp_min", "temp_max"], "as": ["measure", "temp"]}
      ],
      "mark": {"type": "line"},
      "encoding": {
        "y": {"field": "temp", "type": "quantitative"},
        "color": {"field": "measure", "type": "nominal"}
      }
    },
    {
      "mark": "rule",
      "selection": {
        "hover": {"type": "single", "on": "mouseover", "empty": "none"}
      },
      "encoding": {
        "color": {
          "condition": {"selection": {"not": "hover"}, "value": "transparent"}
        }
      }
    }
  ],
  "config": {"axisY": {"minExtent": 30}}
}

请注意，我们已将两个temp_min / temp_max图层替换为一个图层，该图层可转换数据并按列名编码颜色，并自动生成图例。