Deneb，如何创建带有水平和垂直线和标签的折线图

Question

Deneb (Vega Lite) 规范会是什么样子来绘制这样的折线图 + 带有自定义标签的水平线和垂直线，其中这些水平线和垂直线与轴相交？

好吧，这是我的尝试。我需要帮助 - 不知道如何在水平线和垂直线与 y 轴和 x 轴相交的位置添加标签？

{
"data": {
    "values": [
        {"date": "2010-01-01", "price": "300", "source": "A"},
        {"date": "2011-01-01", "price": "315", "source": "A"},
        {"date": "2012-01-01", "price": "285", "source": "A"},
        {"date": "2013-01-01", "price": "345", "source": "A"},
        {"date": "2014-01-01", "price": "365", "source": "A"},
        {"date": "2015-01-01", "price": "385", "source": "A"},

        {"date": "2016-01-01", "price": "415", "source": "A"},
        {"date": "2017-01-01", "price": "400", "source": "A"},
        {"date": "2018-01-01", "price": "380", "source": "A"},
        {"date": "2019-01-01", "price": "270", "source": "A"},
        {"date": "2020-01-01", "price": "325", "source": "A"},
      
        {"date": "2021-01-01", "price": "345", "source": "A"},
        {"date": "2022-01-01", "price": "360", "source": "A"},

        {"date": "2015-01-01", "price": "385", "source": "B"},
        {"date": "2010-01-01", "price": "385", "source": "B"},

        {"date": "2015-01-01", "price": "385", "source": "C"},
        {"date": "2015-01-01", "price": "0", "source": "C"}


      
      ]
  },

"layer" : [
    {
        "width": 500,
        "height": 250,        
        "mark": "line",
        
        "transform": [{"filter": "datum.source==='A'"}],
        
        "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
        }
    },

    {
        "mark": {"type":"line", "strokeDash": [3,1]},
        
        "transform": [{"filter": "datum.source==='B'"}],

        "encoding": {
            "x": {"field": "date", "type": "temporal"},
            "y": {"field": "price", "type": "quantitative"}
        }
    },

    {
      "mark": {"type":"line", "strokeDash": [3,1]},
      
      "transform": [{"filter": "datum.source==='C'"}],

      "encoding": {
          "x": {"field": "date", "type": "temporal"},
          "y": {"field": "price", "type": "quantitative"}
      }
  }
]

}

Answer 1

试试这个。

{
  "data": {
    "values": [
      {"date": "2010-01-01", "price": "300", "source": "A"},
      {"date": "2011-01-01", "price": "315", "source": "A"},
      {"date": "2012-01-01", "price": "285", "source": "A"},
      {"date": "2013-01-01", "price": "345", "source": "A"},
      {"date": "2014-01-01", "price": "365", "source": "A"},
      {"date": "2015-01-01", "price": "385", "source": "A"},
      {"date": "2016-01-01", "price": "415", "source": "A"},
      {"date": "2017-01-01", "price": "400", "source": "A"},
      {"date": "2018-01-01", "price": "380", "source": "A"},
      {"date": "2019-01-01", "price": "270", "source": "A"},
      {"date": "2020-01-01", "price": "325", "source": "A"},
      {"date": "2021-01-01", "price": "345", "source": "A"},
      {"date": "2022-01-01", "price": "360", "source": "A"},
      {"date": "2015-01-01", "price": "385", "source": "B"},
      {"date": "2010-01-01", "price": "385", "source": "B"},
      {"date": "2015-01-01", "price": "385", "source": "C"},
      {"date": "2015-01-01", "price": "0", "source": "C"}
    ]
  },
  "width": 500,
  "height": 250,
  "layer": [
    {
      "mark": "line",
      "transform": [{"filter": "datum.source==='A'"}],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "line", "strokeDash": [3, 1]},
      "transform": [{"filter": "datum.source==='B'"}],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "line", "strokeDash": [3, 1]},
      "transform": [{"filter": "datum.source==='C'"}],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "data": {"values": [{}]},
      "mark": {
        "type": "text",
        "text": "Label A",
        "dx": -50,
        "dy": 0,
        "color": "red"
      },
      "encoding": {"x": {"datum": {"year": 2010}}, "y": {"datum": 385}}
    },
    {
      "data": {"values": [{}]},
      "mark": {
        "type": "text",
        "text": "Label B",
        "dx": 0,
        "dy": 30,
        "color": "red"
      },
      "encoding": {"x": {"datum": {"year": 2015}}, "y": {"datum": 0}}
    }
  ]
}