如何为数组的每个元素绘制多条线，其中包含 vega 规范数据中的 y 值？

Question

我正在使用 vega 和 D3 绘制动态数据集与时间的关系，（比如多个传感器值与时间的关系在 x-轴）。在我的规范中，数据元素的值为 x 和 y，其中 x 是时间戳，y 是包含传感器值的数组。如下所示：

"data": [
    {
      "name": "source",
      "values": [
        {"x": 1,"y": [28, 18]},
        {"x": 2,"y": [55, 45]},
        {"x": 3,"y": [43, 33]},
        {"x": 4,"y": [91, 81]},
        {"x": 5,"y": [81, 71]},
        {"x": 6,"y": [53, 43]},
        {"x": 7,"y": [19, 9]},
        {"x": 8,"y": [87, 77]},
        {"x": 9,"y": [52, 42]},
        {"x": 10,"y": [48, 38]},
        {"x": 11,"y": [24, 14]},
        {"x": 12,"y": [49, 39]},
        {"x": 13,"y": [87, 77]},
        {"x": 14,"y": [66, 56]},
        {"x": 15,"y": [17, 7]},
        {"x": 16,"y": [27, 17]},
        {"x": 17,"y": [68, 58]},
        {"x": 18,"y": [16, 6]},
        {"x": 19,"y": [49, 39]},
        {"x": 20,"y": [15, 5]}
      ],
      "format": {"type": "json"},
      "transform": []
    }
  ]

我想像这样绘制它们： Sample output for multiline chart

"y" 也可以是 3 个元素的数组。在这种情况下，将显示 3 行。

要绘制这样的图表，规范应该是什么？

Answer 1

下面的规格为 3 个不同的来源绘制了 3 条线。我没有使用 'y' 的数组，而是使用了 3 个不同的数据源。如果我可以删除每一行的冗余 x 值，它的工作 around.It 会很好：

{
  "data": [
    {
      "format": {"type": "json"},
      "name": "source1",
      "transform": [],
      "values": [
        {"x": 1,"y": -0.3902548849582672},
        {"x": 2,"y": -0.6003460884094238},
        {"x": 3,"y": 0.11851298063993454},
        {"x": 4,"y": 0.181959331035614},
        {"x": 5,"y": 0.058059390634298325},
        {"x": 6,"y": 0.3555389642715454},
        {"x": 7,"y": 0.4836287498474121},
        {"x": 8,"y": 0.547075092792511},
        {"x": 9,"y": -0.14185644686222076},
        {"x": 10,"y": -0.5560533404350281}
      ]
    },
    {
      "format": {"type": "json"},
      "name": "source2",
      "transform": [],
      "values": [
        {"x": 1,"y": 9.677961349487305},
        {"x": 2,"y": 8.559270858764648},
        {"x": 3,"y": 6.373963356018066},
        {"x": 4,"y": 5.665279865264893},
        {"x": 5,"y": 5.106233596801758},
        {"x": 6,"y": 4.126406669616699},
        {"x": 7,"y": 3.599682331085205},
        {"x": 8,"y": 9.55825138092041},
        {"x": 9,"y": 9.739612579345703},
        {"x": 10,"y": 9.660603523254395}
      ]
    },
    {
      "format": {"type": "json"},
      "name": "source3",
      "transform": [],
      "values": [
        {"x": 1,"y": -0.44352585077285767},
        {"x": 2,"y": 2.11946702003479},
        {"x": 3,"y": 6.378153324127197},
        {"x": 4,"y": 6.696582317352295},
        {"x": 5,"y": 6.830059051513672},
        {"x": 6,"y": 7.590816497802734},
        {"x": 7,"y": 9.215282440185547},
        {"x": 8,"y": -0.4034229815006256},
        {"x": 9,"y": -1.8351556062698364},
        {"x": 10,"y": -1.7950527667999268}
      ]
    }
  ],
  "height": 200,
  "marks": [
    {
      "axes": [
        {
          "grid": true,
          "layer": "back",
          "scale": "x",
          "ticks": 5,
          "title": "x",
          "type": "x"
        },
        {
          "grid": true,
          "layer": "back",
          "scale": "y",
          "title": "y",
          "type": "y"
        }
      ],
      "description": "Line chart of Horsepower over time",
      "from": {"data": "layout"},
      "marks": [
        {
          "from": {
            "data": "source1",
            "transform": [{"by": "-x","type": "sort"}]
          },
          "properties": {
            "update": {
              "stroke": {"value": "#5b4fff"},
              "strokeWidth": {"value": 1},
              "x": {"field": "x","scale": "x"},
              "y": {"field": "y","scale": "y"}
            }
          },
          "type": "line"
        },
        {
          "from": {
            "data": "source2",
            "transform": [{"by": "-x","type": "sort"}]
          },
          "properties": {
            "update": {
              "stroke": {"value": "#16ea5d"},
              "strokeWidth": {"value": 1},
              "x": {"field": "x","scale": "x"},
              "y": {"field": "y","scale": "y"}
            }
          },
          "type": "line"
        },
        {
          "from": {
            "data": "source3",
            "transform": [{"by": "-x","type": "sort"}]
          },
          "properties": {
            "update": {
              "stroke": {"value": "#c93e06"},
              "strokeWidth": {"value": 1},
              "x": {"field": "x","scale": "x"},
              "y": {"field": "y","scale": "y"}
            }
          },
          "type": "line"
        }
      ],
      "name": "root",
      "properties": {
        "update": {"height": {"value": 200},"width": {"value": 200}}
      },
      "scales": [
        {
          "clamp": true,
          "domain": {"data": "source1","field": "x","sort": true},
          "name": "x",
          "nice": true,
          "rangeMax": 200,
          "rangeMin": 0,
          "round": true
        },
        {
          "clamp": true,
          "domain": {"data": "source1","field": "y"},
          "name": "y",
          "nice": true,
          "rangeMax": 0,
          "rangeMin": 200,
          "round": true
        }
      ],
      "type": "group"
    }
  ],
  "padding": "auto",
  "width": 200
}

使用下面的 link 在 Vega Editor 上测试上述规格：

http://vega.github.io/vega-editor/

如何为数组的每个元素绘制多条线，其中包含 vega 规范数据中的 y 值？

How to plot multiple lines one for each element of an array contains y values in vega spec data?

javascript

d3.js

plot

linechart

vega