用于多字段数据的 Vega-lite Legend答案

【问题标题】：Vega-lite Legend for multi-field data用于多字段数据的 Vega-lite Legend
【发布时间】：2020-03-02 14:22:20
【问题描述】：

我的数据格式化为每个 x 多个字段：

x1 f1 f2 f3
x2 f4 f5 f6
...

这样我就可以使用带有自定义格式的工具提示（显示单个 x 的所有值），以便我可以自定义每个字段的标记。 link to sample。

我想添加一个图例来显示颜色的含义，但我无法为多个字段自动生成一个。我正在考虑添加第二个具有离散值的字段和颜色的数据集（类似于this），但显然你不能将多个集合添加到 vega-lite，而且我不知道转移到纯 vega .这可能吗？

【问题讨论】：

标签： vega vega-lite

【解决方案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 层替换为单个层，该层可转换数据并按列名称对颜色进行编码，从而自动生成图例。

【讨论】：