Javascript 理解Vega中的垂直条形图

我一直在玩织女星，但我不知道如何把垂直条形图变成水平条形图

不久前在这里发布了一个类似的问题：但是提供的答案并不是很清楚，到底对代码做了什么来产生期望的结果。我也无法运行解决方案

我现在的理解是，你需要切换X轴和Y轴以及刻度，但我迷失的地方是让标记也被翻转？我试着设置“x”和“y”属性，但我得到的只是一个空白图表作为回报。。。我真的觉得我只遗漏了一件事，因为我的轴是对的，但我不知道它是什么

编辑：取得了一些进展！我的列现在出现了，但是它们的位置相对于实际的刻度发生了奇怪的变化。我已经研究过调整有序刻度的“points”参数，但结果是最后一列

下面是到目前为止我掌握的代码

{
  "width": 400,
  "height": 400,
  "padding": {
    "top": 30,
    "left": 40,
    "bottom": 30,
    "right": 10
  },
  "data": [
    {
      "name": "table",
      "values": [
        {
          "x": "Mon",
          "y": 2
        },
        {
          "x": "Tue",
          "y": 3
        },
        {
          "x": "Wed",
          "y": 10
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "points": true
      "range": "height",
      "zero": false,
      "domain": {
        "data": "table",
        "field": "x"
      }
    },
    {
      "name": "y",
      "type": "linear",
      "range": "width",
      "domain": {
        "data": "table",
        "field": "y"
      },
      "nice": true
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "y"
    },
    {
      "type": "y",
      "scale": "x"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "properties": {
        "enter": {
          "x": {
            "scale": "y",
            "field": "y"
          },
          "x2": {
            "value": 0
          },
          "yc": {
            "scale": "x",
            "field": "x"
          },
          "height": {
            "value": 40
          },
          "fill": {
            "r": {
              "value": 66
            },
            "g": {
              "value": 190
            },
            "b": {
              "value": 244
            }
          }
        }
      }
    }
  ]
}

胜利

这是一个工作规范

我使用序数刻度的“padding”属性来获得所需的结果

{
  "width": 400,
  "height": 400,
  "padding": {
    "top": 30,
    "left": 40,
    "bottom": 30,
    "right": 10
  },
  "data": [
    {
      "name": "table",
      "values": [
        {
          "x": "Mon",
          "y": 2
        },
        {
          "x": "Tue",
          "y": 3
        },
        {
          "x": "Wed",
          "y": 10
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "range": "height",
      "points": true,
      "padding": 1,
      "zero": false,
      "domain": {
        "data": "table",
        "field": "x"
      }
    },
    {
      "name": "y",
      "type": "linear",
      "range": "width",
      "domain": {
        "data": "table",
        "field": "y"
      },
      "nice": true
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "y"
    },
    {
      "type": "y",
      "scale": "x"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "properties": {
        "enter": {
          "x": {
            "scale": "y",
            "field": "y"
          },
          "x2": {
            "value": 0
          },
          "yc": {
            "scale": "x",
            "field": "x"
          },
          "height": {
            "value": 40
          },
          "fill": [
            66,
            190,
            244
          ]
        }
      }
    }
  ]
}