将具有不同样式的数据添加到 Vega Lite 折线图

Question

我有一个包含 3 个不同系列的线图，它在颜色编码、图例标记等方面效果很好。我现在想做的是在整个图中的特定 y 值处的虚线处。以前我通常会通过添加另一个简单的数据集并单独设置那个数据集的绘图样式来做到这一点，但是我有点坚持在 VL 中这样做。

到目前为止，我得到的进一步进展是 this plot，这是尝试使用图层添加额外的两个点以在 y = 100% 处绘制线。但是，由于某种原因，这些点没有加入，我也希望能够从图例中删除该系列，但我不完全确定如何（第一次使用图例）。

我还认为也许要走的路是编辑 y 网格，但我仍然希望 y 刻度位于当前位置，只是 y = 100 处的一条线，我不确定如何对轴有选择性。

Any/all 帮助感谢。

编辑：哦，在那个情节中，我希望 y 标签只显示“%”，而不是其他虚拟系列。

Answer 1

如果您想在图表的特定 y 值处添加一条线，您可以使用 rule 标记并明确设置 y 值；基本上像这样添加一个层：

{
  "mark": "rule",
  "encoding": {"y": {"value": 100}}
}

添加此内容后您的图表如下所示 (vega editor)：

{
  "config": {
    "view": {"stroke": "transparent"},
    "axis": {
      "grid": false,
      "labelAngle": 0,
      "labelFont": "museo-sans-300",
      "labelFontSize": 15,
      "labelFontWeight": "normal",
      "titleFont": "museo-sans-300",
      "titleFontSize": 15,
      "titleFontWeight": "normal"
    }
  },
  "data": {"name": "data"},
  "layer": [
    {
      "mark": {
        "type": "line",
        "interpolate": "monotone",
        "point": {"filled": true, "stroke": "white", "size": 100}
      },
      "title": {
        "text": "",
        "anchor": "middle",
        "font": "museo-sans-300",
        "fontSize": 20,
        "offset": 0,
        "fontWeight": "normal"
      },
      "encoding": {
        "tooltip": [
          {"field": "%", "type": "quantitative"},
          {"field": "metric", "type": "nominal"}
        ],
        "x": {
          "field": "date",
          "type": "temporal",
          "timeUnit": "monthdate",
          "axis": {"title": null, "tickCount": "day"}
        },
        "y": {
          "field": "%",
          "type": "quantitative",
          "axis": {"titleX": -50},
          "scale": {"domain": [0, 150]}
        },
        "color": {
          "field": "metric",
          "type": "nominal",
          "legend": {
            "labelFont": "museo-sans-300",
            "labelFontSize": 15,
            "title": null,
            "offset": 20,
            "rowPadding": 7.5
          }
        }
      }
    },
    {"mark": "rule", "encoding": {"y": {"value": 100}}}
  ],
  "width": 750,
  "height": 200,
  "autosize": {"type": "none"},
  "padding": {"top": 30, "left": 75, "right": 250, "bottom": 30},
  "datasets": {
    "data": [
      {"date": "2019-12-06", "metric": "Linehaul util. %", "%": 29},
      {"date": "2019-12-10", "metric": "Linehaul util. %", "%": 53},
      {"date": "2019-12-11", "metric": "Linehaul util. %", "%": 62},
      {"date": "2019-12-12", "metric": "Linehaul util. %", "%": 62},
      {"date": "2019-12-06", "metric": "Daily recovery %", "%": 97.1},
      {"date": "2019-12-09", "metric": "Daily recovery %", "%": 82.3},
      {"date": "2019-12-10", "metric": "Daily recovery %", "%": 76.7},
      {"date": "2019-12-11", "metric": "Daily recovery %", "%": 63.8},
      {"date": "2019-12-12", "metric": "Daily recovery %", "%": 91.9},
      {"date": "2019-12-06", "metric": "30d rolling recovery %", "%": 77.3},
      {"date": "2019-12-07", "metric": "30d rolling recovery %", "%": 77.3},
      {"date": "2019-12-08", "metric": "30d rolling recovery %", "%": 77.3},
      {"date": "2019-12-09", "metric": "30d rolling recovery %", "%": 77.9},
      {"date": "2019-12-10", "metric": "30d rolling recovery %", "%": 77.7},
      {"date": "2019-12-11", "metric": "30d rolling recovery %", "%": 74.7},
      {"date": "2019-12-12", "metric": "30d rolling recovery %", "%": 74.7}
    ]
  }
}

注意：您最初的方法不起作用的原因是许多点的“%T”字段未定义，并且未定义的点之间没有画线。您可以通过过滤未定义的点或使用不同的数据集绘制线层来解决此问题，但总体而言使用规则标记更简单。

将具有不同样式的数据添加到 Vega Lite 折线图

Add data with different styling to Vega Lite line chart

vega-lite