Question

我使用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}
        }
      }
    }
  ]
};

Answer 1

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

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

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

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

这将删除 y-Value 小于0的每个数据，然后您可以正常进行。

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

P.S。通过突出显示/加下划线来随意编辑，因为这是我的第一篇文章，最终将包含缺陷：）。

Vega Visualization Custom Axis方向

1 个答案: