从 Vega-lite 中的分组条形图中删除空值

Question

我正在使用 Vega-lite 创建一个分组条形图，其中学校按 x 轴上的 Size 字符串变量分组。 Y 轴是定量的。我有它 almost 工作，但目前每个组都在每个学校的 x 轴上包含一个点，包括那些不在该组中的学校，因此不显示任何数据。例如：

如何确保学校只出现在它们所属的类别中？除了我在网上找到的一个例子之外，其他所有例子都使用了旧版本的 Vega-lite 并试图对它们进行逆向工程但没有结果。

var barGroupCreate = {
      $schema: "https://vega.github.io/schema/vega-lite/v5.json",
      data: { values: toolData },
      config: { view: { stroke: "transparent" }, axis: { domainWidth: 1 } },
      spacing: { column: 10 },
      facet: {
        column: {
          field: "Size",
          type: "nominal",
          header: { orient: "bottom" },
        },
      },
      spec: {
        width: { step: 12 },
        mark: "bar",
        encoding: {
          y: {
            aggregate: "sum",
            field: "Contact Hours (Total)",
            title: "Contact Hours",
            axis: { grid: false },
          },
          x: { field: "Name", axis: null },
          color: {
            field: "Size",
            scale: {
              range: [
                "#002D74",
                "#F26852",
                "#2A7DE1",
                "#FFD100",
                "#00A9C5",
                "#3A4A9F",
              ],
            },
          },
        },
      },
    };

我的数据样本（toolData）：

"values": [
  {
    "Name": "Alamo",
    "Contact Hours (Total)": 19930352,
    "Size": "Very large",
  },
  {
    "Name": "Alvin",
    "Contact Hours (Total)": 2211352,
    "Size": "Medium",
  },
  {
    "Name": "Amarillo",
    "Contact Hours (Total)": 4363650,
    "Success Points (Total)": 16945,
    "Size": "Large",
  },
  {
    "Name": "Angelina",
    "Contact Hours (Total)": 1983398,
    "Size": "Medium",
  },
  {
    "Name": "Austin",
    "Contact Hours (Total)": 14027493,
    "Size": "Very large",
  },
  {
    "Name": "Blinn",
    "Contact Hours (Total)": 7594730,
    "Size": "Large",
  },

Answer 1

您可以通过添加

来做到这一点

resolve: {scale: {x: "independent"}}

在 barGroupCreate 内。

更多信息请见https://vega.github.io/vega-lite/docs/facet.html#resolve

从 Vega-lite 中的分组条形图中删除空值

Remove empty values from grouped bar chart in Vega-lite

javascript

data-visualization

vega

vega-lite