如何在 vega-lite 的折线图中画一条线？答案

【问题标题】：How to draw a line in a line chart in vega-lite?如何在 vega-lite 的折线图中画一条线？
【发布时间】：2020-12-06 05:36:15
【问题描述】：

我有一条从索引绘制的曲线

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.json",
    "title": {
    "text": "Receiver Operating Characteristics - Area Under Curve",
    "anchor": "middle",
    "fontSize": 16,
    "frame": "group",
    "offset": 4
  },
  "data": {
    "url" : {
        "%context%": true,
        "index": "roccurve_index2",
        "body": {
          "size":10000,
          "_source": ["lr_fpr", "lr_tpr"],
        }
      }  
      "format": {"property": "hits.hits"},
    },
  "mark": {
    "type": "line",
    "point": true
  },
  "encoding": {
    "x": {"field": "_source.lr_fpr", "type": "quantitative", "title":"False Positive Rate"},
    "y": {"field": "_source.lr_tpr", "type": "quantitative", "title":"True Positive Rate"}
  }
}

情节看起来像

现在我需要为 0 和 1 之间的基本模型绘制一条基线，例如

这可能吗，并将其设为带有图例的虚线，显示名称为 Base Model、RF Model

【问题讨论】：

我想用你同样的代码，但它有错误，所以用另一个例子来演示第二行。

标签： vega-lite vega

【解决方案1】：

是的，可以使用Layered Views。

我将使用Line Chart example 来修改和添加另一条同样是虚线的行。原图： https://vega.github.io/editor/#/examples/vega-lite/line

这是修改后的图表，我对直线使用了明确的值：

https://vega.github.io/editor/#/gist/152fbe5f986ba78e422bb3430628f010/spec.json

分层解决方案

当您使用分层视图时，您可以在同一个图表和相同的 x 和 y 轴中放置多条线

  "layer" : [
      {
         //mark #1
      },
      {
        //mark #2
      }
  ]

虚线

可以使用strokeDashproperty 来实现。看这个例子：Line chart with varying stroke dash

【讨论】：