Vega 可视化自定义轴方向

Question

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

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

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

以下是织女星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 轴 从 0 到 80，而不是 x 轴，如您所述（因为 x 轴 不包括 -40）。

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

您可以通过将类型 filter 的数据转换添加到顶层 data-属性来实现此目的，如下所示方式：

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

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

Make sure to enter above code in the toplevel-property data.

P.S。随意通过突出显示/下划线任何内容进行编辑，因为这是我的第一个 post，最终将包含缺陷 :)。

Vega 可视化自定义轴方向

Vega Visualization Custom Axis orientation

data-visualization

graph-visualization

vega