内联值有什么问题？

Question

该 "线图 "演示 工作正常，并且用javascript表达，如在 getting_started.html.

...但是 当我把URL中的 "data "字段替换成内联值时，它只显示axys，没有图成。

它的工作原理。"data":{"url":"https://vega.github.io/vega-lite/examples/data/stocks.csv"},

它 不 工作。

var vlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data":  {"values": [
      {"symbol":"MSFT","date":"Jan 1 2000","price":39.81},
      {"symbol":"MSFT","date":"Feb 1 2000","price":36.35},
      {"symbol":"MSFT","date":"Mar 1 2000","price":43.22},
      {"symbol":"MSFT","date":"Apr 1 2000","price":28.37},
      {"symbol":"MSFT","date":"May 1 2000","price":25.45}
  ]},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"}
  }
};

有一个错误在控制台， 这是不正常的。

WARN Infinite extent for field "date"（日期）: [无限大，-无限大]

Answer 1

你的规范只包含带有 symbol="MSFT". 它还包含一个滤波器变换。{"filter": "datum.symbol==='GOOG'"}的行，删除除了那些带有 symbol="GOOG". 结果是没有数据可供绘制。

您所看到的警告来自于轴的范围是由数据决定的，当没有数据时，轴的范围就留在了 [-Infinity, Infinity].

如果你删除或修改这个过滤语句，图表就会工作。比如说

vlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data":  {"values": [
      {"symbol":"MSFT","date":"Jan 1 2000","price":39.81},
      {"symbol":"MSFT","date":"Feb 1 2000","price":36.35},
      {"symbol":"MSFT","date":"Mar 1 2000","price":43.22},
      {"symbol":"MSFT","date":"Apr 1 2000","price":28.37},
      {"symbol":"MSFT","date":"May 1 2000","price":25.45}
  ]},
  "transform": [{"filter": "datum.symbol==='MSFT'"}],
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"}
  }
};

结果是这样的(在Vega编辑器中打开图表):

Answer 2

根据《维加协定》 文件 对于Date类型，日期需要是一个有效的Javascript日期对象或时间戳。

一个有效的JavaScript Date 对象或时间戳。由于JSON本身不支持日期值，在Vega规范中，日期-时间值可以表示为数字时间戳（由Date.getTime()方法产生的UNIX纪元以来的毫秒数）或使用信号表达式（如 {"signal": "datetime(2001, 2, 3)"})

Answer 3

只需评论 "魔线"

// "transform": [{"filter": "datum.symbol==='GOOG'"}],

---

请解释一下! 这是一个维基答案