vega-lite - 如何为分层线图创建图例

Question

基本上我所拥有的是一个由多个折线图分层的折线图。由于每个图表只有一条线，因此不会自动生成图例，那么获取图表图例的最佳方法是什么？我一直在考虑尝试转换我的数据集。这是从 2019 年到 2020 年 6 月，CDC 每周的死亡总数。 csv 的排列方式是每个州的每个日期都有一个记录，其中每种疾病类型作为它自己的列，整数作为列值。所以没有一个要绘制的字段，有很多，因此是分层的。任何有关如何解决此问题的见解将不胜感激！这是我到目前为止的工作：

https://observablehq.com/@justin-krohn/covid-excess-deaths

Answer 1

datum您可以通过将每个图层的颜色编码设置为指定您希望它具有的标签来为分层图表创建图例。例如（维加编辑器）：

{
  "data": {
    "values": [
      {"x": 1, "y1": 1, "y2": 2},
      {"x": 2, "y1": 3, "y2": 1},
      {"x": 3, "y1": 2, "y2": 4},
      {"x": 4, "y1": 4, "y2": 3},
      {"x": 5, "y1": 3, "y2": 5}
    ]
  },
  "encoding": {"x": {"field": "x", "type": "quantitative"}},
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "y": {"field": "y1", "type": "quantitative"},
        "color": {"datum": "y1"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "y": {"field": "y2", "type": "quantitative"},
        "color": {"datum": "y2"}
      }
    }
  ]
}

或者，您可以使用折叠变换来旋转您的数据，这样您就可以使用简单的颜色编码来绘制多条线，而不是手动图层。例如（维加编辑器）：

{
  "data": {
    "values": [
      {"x": 1, "y1": 1, "y2": 2},
      {"x": 2, "y1": 3, "y2": 1},
      {"x": 3, "y1": 2, "y2": 4},
      {"x": 4, "y1": 4, "y2": 3},
      {"x": 5, "y1": 3, "y2": 5}
    ]
  },
  "transform": [{"fold": ["y1", "y2"], "as": ["name", "y"]}],
  "mark": "line",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {"field": "name", "type": "nominal"}
  }
}