Vega：x 轴条形图超出范围答案

【问题标题】：Vega: x-axis bar ploted out of rangeVega：x 轴条形图超出范围
【发布时间】：2020-12-11 01:55:10
【问题描述】：

我只是想用 Vega 绘制一个分组条形图。但是在 x 轴上绘制的条超出了范围。
我试图检查代码，但由于对 Vega 的了解有限，我失败了。 :-(
这是我的代码。我要做的是绘制一个按国家代码分组的垂直条形聊天，变量名称为“类别”：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic grouped bar chart example.",
  "width": 400,
  "height": 500,
  "padding": 5,

  "data": [
    {
      "name": "table",
      "values": [
    {"position": "0", "value": "0.017220172", "category": "ARG", "snapshots": "2020/10/21"},
    {"position": "1", "value": "0.026153846", "category": "ARG", "snapshots": "2020/5/21"},
    {"position": "2", "value": "0.031484258", "category": "ARG", "snapshots": "2020/6/3"},
    {"position": "3", "value": "0.022488756", "category": "ARG", "snapshots": "2020/6/17"},
    {"position": "4", "value": "0.024390244", "category": "ARG", "snapshots": "2020/7/2"},
    {"position": "5", "value": "0.015130674", "category": "ARG", "snapshots": "2020/7/29"},
    {"position": "6", "value": "0.017173052", "category": "ARG", "snapshots": "2020/8/26"},
    {"position": "7", "value": "0.025510204", "category": "ARG", "snapshots": "2020/9/24"},
    {"position": "0", "value": "0.002949853", "category": "BRA", "snapshots": "2020/10/21"},
    {"position": "1", "value": "0.012944984", "category": "BRA", "snapshots": "2020/5/21"},
    {"position": "2", "value": "0.018987342", "category": "BRA", "snapshots": "2020/6/3"},
    {"position": "3", "value": "0.006309148", "category": "BRA", "snapshots": "2020/6/17"},
    {"position": "4", "value": "0.003125", "category": "BRA", "snapshots": "2020/7/2"},
    {"position": "5", "value": "0.009202454", "category": "BRA", "snapshots": "2020/7/29"},
    {"position": "6", "value": "0.011976048", "category": "BRA", "snapshots": "2020/8/26"},
    {"position": "7", "value": "0.00295858", "category": "BRA", "snapshots": "2020/9/24"},
    {"position": "0", "value": "0", "category": "CAN", "snapshots": "2020/10/21"},
    {"position": "1", "value": "0", "category": "CAN", "snapshots": "2020/5/21"},
    {"position": "2", "value": "0", "category": "CAN", "snapshots": "2020/6/3"},
    {"position": "3", "value": "0", "category": "CAN", "snapshots": "2020/6/17"},
    {"position": "4", "value": "0", "category": "CAN", "snapshots": "2020/7/2"},
    {"position": "5", "value": "0", "category": "CAN", "snapshots": "2020/7/29"},
    {"position": "6", "value": "0", "category": "CAN", "snapshots": "2020/8/26"},
    {"position": "7", "value": "0", "category": "CAN", "snapshots": "2020/9/24"},
    {"position": "0", "value": "0.002159827", "category": "CHL", "snapshots": "2020/10/21"},
    {"position": "1", "value": "0.0302267", "category": "CHL", "snapshots": "2020/5/21"},
    {"position": "2", "value": "0.024813896", "category": "CHL", "snapshots": "2020/6/3"},
    {"position": "3", "value": "0.009975062", "category": "CHL", "snapshots": "2020/6/17"},
    {"position": "4", "value": "0.00486618", "category": "CHL", "snapshots": "2020/7/2"},
    {"position": "5", "value": "0.01891253", "category": "CHL", "snapshots": "2020/7/29"},
    {"position": "6", "value": "0.004555809", "category": "CHL", "snapshots": "2020/8/26"},
    {"position": "7", "value": "0.013274336", "category": "CHL", "snapshots": "2020/9/24"},
    {"position": "0", "value": "0.010989011", "category": "COL", "snapshots": "2020/10/21"},
    {"position": "1", "value": "0.016393443", "category": "COL", "snapshots": "2020/5/21"},
    {"position": "2", "value": "0", "category": "COL", "snapshots": "2020/6/3"},
    {"position": "3", "value": "0", "category": "COL", "snapshots": "2020/6/17"},
    {"position": "4", "value": "0.014492754", "category": "COL", "snapshots": "2020/7/2"},
    {"position": "5", "value": "0", "category": "COL", "snapshots": "2020/7/29"},
    {"position": "6", "value": "0.024096386", "category": "COL", "snapshots": "2020/8/26"},
    {"position": "7", "value": "0.011494253", "category": "COL", "snapshots": "2020/9/24"}
    ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width",
      "padding": 0.2
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": {"data": "table", "field": "value"},
      "range": "height",
      "round": true,
      "zero": true,
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "position"},
      "range": {"scheme": "category20"}
    }
  ],

  "axes": [
    {"orient": "left", "scale": "yscale"},
    {"orient": "bottom", "scale": "xscale", "tickSize": 2, "labelPadding": 4, "zindex": 1}
  ],

  "marks": [
    {
      "type": "group",

      "from": {
        "facet": {
          "data": "table",
          "name": "facet",
          "groupby": "category"
        }
      },

      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"}
        }
      },
      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": "width",
          "domain": {"data": "facet", "field": "position"}
        }
      ],

      "marks": [
        {
          "name": "bars",
          "from": {"data": "facet"},
          "type": "rect",
          "encode": {
            "enter": {
              "x": {"scale": "pos", "field": "position"},
              "width": {"scale": "pos", "band": 1},
              "y": {"scale": "yscale", "field": "value"},
              "y2": {"scale": "yscale", "value": 0},
              "fill": {"scale": "color", "field": "position"}
            }
          }
        }
      ]
    }
  ]
}

这是我得到的结果：

【问题讨论】：

标签： vega

【解决方案1】：

感谢这篇文章： https://gist.github.com/AlexAbes/c17703ce10f7f4a272324ea317e7afce;
x-scale 需要更新。

  "signals": [
    {"name": "width", "update": "bandwidth('xscale')"}
  ],

【讨论】：