垂直和水平条形图的vega分组差异？

Question

先谢谢！我正在尝试使用Vega制作分组条形图。因此，我采用了“堆积条形图示例”数据（删除了堆积变换），并制作了一个垂直图和一个水平图。奇怪的是，水平的按我的预期工作，但是垂直的在每个单独的组上都有重叠的条。我只用切换属性就使它们完全相同。我将在下面发布我的json文件。

垂直条形图：

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

  "data": [
    {
      "name": "table",
      "values": [
        {"x": 0, "y": 28, "c": 0}, {"x": 0, "y": 55, "c": 1},
        {"x": 1, "y": 43, "c": 0}, {"x": 1, "y": 91, "c": 1},
        {"x": 2, "y": 81, "c": 0}, {"x": 2, "y": 53, "c": 1},
        {"x": 3, "y": 19, "c": 0}, {"x": 3, "y": 87, "c": 1},
        {"x": 4, "y": 52, "c": 0}, {"x": 4, "y": 48, "c": 1},
        {"x": 5, "y": 24, "c": 0}, {"x": 5, "y": 49, "c": 1},
        {"x": 6, "y": 87, "c": 0}, {"x": 6, "y": 66, "c": 1},
        {"x": 7, "y": 17, "c": 0}, {"x": 7, "y": 27, "c": 1},
        {"x": 8, "y": 68, "c": 0}, {"x": 8, "y": 16, "c": 1},
        {"x": 9, "y": 49, "c": 0}, {"x": 9, "y": 15, "c": 1}
      ]
      
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "range": "width",
      "domain": {"data": "table", "field": "c"}
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "domain": {"data": "table", "field": "y"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "table", "field": "c"}
    }
  ],

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

  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "facet",
          "data": "table",
          "groupby": "c"
        }
      },
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "c"}
        }
      },
      "signals": [
        {"name": "width", "update": "bandwidth('xscale')"}
      ],

      "scales": [
        {
          "name": "inner",
          "type": "band",
          "range": "width",
          "domain": {"data": "facet", "field": "x"}
        }
      ],

      "axes": [
          {"orient": "top", "scale": "inner", "tickSize": 0, "labelPadding": 10, "zindex": 2, "title": "x"}
      ],
      "marks": [
        {
        "type": "rect",
        "from": {"data": "table"},
        "encode": {
          "enter": {
            "x": {"scale": "inner", "field": "x"},
            "width": {"scale": "inner", "band": 1, "offset": -1},
            "y": {"scale": "yscale", "field": "y"},
            "y2": {"scale": "yscale", "value": 0},
            "fill": {"scale": "color", "field": "c"}
          },
          "update": {
            "fillOpacity": {"value": 1}
          },
          "hover": {
            "fillOpacity": {"value": 0.5}
          }
        }
      }
    ]
  }]
}

水平条形图：

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

  "data": [
    {
      "name": "table",
      "values": [
        {"x": 0, "y": 28, "c": 0}, {"x": 0, "y": 55, "c": 1},
        {"x": 1, "y": 43, "c": 0}, {"x": 1, "y": 91, "c": 1},
        {"x": 2, "y": 81, "c": 0}, {"x": 2, "y": 53, "c": 1},
        {"x": 3, "y": 19, "c": 0}, {"x": 3, "y": 87, "c": 1},
        {"x": 4, "y": 52, "c": 0}, {"x": 4, "y": 48, "c": 1},
        {"x": 5, "y": 24, "c": 0}, {"x": 5, "y": 49, "c": 1},
        {"x": 6, "y": 87, "c": 0}, {"x": 6, "y": 66, "c": 1},
        {"x": 7, "y": 17, "c": 0}, {"x": 7, "y": 27, "c": 1},
        {"x": 8, "y": 68, "c": 0}, {"x": 8, "y": 16, "c": 1},
        {"x": 9, "y": 49, "c": 0}, {"x": 9, "y": 15, "c": 1}
      ]
    }
  ],

  "scales": [
    {
      "name": "y",
      "type": "band",
      "range": "height",
      "domain": {"data": "table", "field": "c"}
    },
    {
      "name": "x",
      "type": "linear",
      "range": "width",
      "domain": {"data": "table", "field": "y"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "table", "field": "c"}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "x", "zindex": 1},
    {"orient": "left", "scale": "y", "zindex": 1}
  ],

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

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

      "encode": {
        "enter": {
          "y": {"scale": "y", "field": "c"}
        }
      },

      "signals": [
        {"name": "height", "update": "bandwidth('y')"}
      ],

      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": "height",
          "domain": {"data": "facet", "field": "x"}
        }
      ],

      "axes": [
          {"orient": "right", "scale": "pos", "tickSize": 0, "labelPadding": 10, "zindex": 3}
      ],
    "marks": [{
      "type": "rect",
      "from": {"data": "facet"},
      "encode": {
            "enter": {
              "y": {"scale": "pos", "field": "x"},
              "height": {"scale": "pos", "band": 1, "offset":-1},
              "x": {"scale": "x", "field": "y"},
              "x2": {"scale": "x", "value": 0},
              "fill": {"scale": "color", "field": "c"}
            }
          }
    }]
    }]
}

图片：

这是我在规格中没有正确设置的东西吗？谢谢。

Answer 1

我知道了。内部图表标记需要来自构面而不是原始表

"from": {"data": "facet"}

解决了这个问题。