垂直和水平条形图的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"}

这样就解决了。