0

我正在使用 Vega Visualization Grammar 制作以下温度随时间变化的图表。我目前正在使用面积图。

  • X 轴 - 时间
  • y 轴 - 温度（从 -40 到 80）

我需要 x 轴从 0 而不是 -40 开始。

以下是 vega Json：

var tempdata = {
  "width": 250,
  "height": 150,
  "background": "#FFF",
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 1,  "y": -40}, {"x": 2,  "y": -30},
        {"x": 3,  "y": -10}, {"x": 4,  "y": -4},
        {"x": 5,  "y": -1}, {"x": 6,  "y": 0},
        {"x": 7,  "y": -5}, {"x": 8,  "y": -2},
        {"x": 9,  "y": 20}, {"x": 10,  "y": 20},
        {"x": 11,  "y": 24}, {"x": 12,  "y": 12},
        {"x": 13,  "y": 50}, {"x": 14,  "y": 30},
        {"x": 15,  "y": 15}, {"x": 16,  "y": 60},
        {"x": 17,  "y": 60}, {"x": 18,  "y": 80},
        {"x": 19,  "y": 70}, {"x": 20,  "y": 70},
        {"x": 21,  "y": 72}, {"x": 22,  "y": 75},
        {"x": 23,  "y": 60}, {"x": 24,  "y": 60}


      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "range": "width",
      "zero": false,
      "domain": {"data": "table", "field": "x"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "y"}
    }
  ],
  "axes": [
    {
     "type": "x",
     "scale": "x",
     "properties": {
       "ticks": {
         "stroke": {"value": "#000"}
       },

       "labels": {
         "fill": {"value": "#000"}
       },
       "axis": {
         "stroke": {"value": "#000"},
         "strokeWidth": {"value": 1.5}
       }
     }
   },
    {
     "type": "y",
     "scale": "y",
     "properties": {
       "ticks": {
         "stroke": {"value": "#000"}
       },

       "labels": {
         "fill": {"value": "#000"}
       },
       "axis": {
         "stroke": {"value": "#000"},
         "strokeWidth": {"value": 1.5}
       }
     }
   }
  ],
  "marks": [
    {
      "type": "area",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "interpolate": {"value": "monotone"},
          "x": {"scale": "x", "field": "x"},
          "y": {"scale": "y", "field": "y"},
          "y2": {"scale": "y", "value": 0},
          "fill": {"value": "#A41600"},
          "stroke": {"value": "#FFF"}
        },
        "update": {
          "fillOpacity": {"value": 1}
        },
        "hover": {
          "fillOpacity": {"value": 0.5}
        }
      }
    }
  ]
};

在此处输入图像描述

4

1 回答 1

1

从您所写的内容来看，我想您希望y-Axis从 0 到 80 开始，而不是x-Axis，正如您所说的（因为x-Axis不包括-40）。

一种可能的方法是删除违反您的条件的数据，换句话说：删除y 值小于 0 的每个数据。

您可以通过以下方式将过滤器类型的数据转换添加到顶级数据属性来实现此目的：

"transform":
[
  {
      "type": "filter",
      "test": "datum.y >= 0"
  }
]

这将删除所有y 值小于 0 的数据，然后您就可以正常进行了。

确保在 toplevel-property data中输入上述代码。

PS随时通过突出显示/下划线来编辑任何内容，因为这是我的第一篇文章，最终将包含缺陷:)。

于 2016-08-11T11:44:59.607 回答