Vega-Lite交互式柱状图问题：未选国家时柱子堆叠显示异常

你的问题核心在于两个关键点：缺少x轴分类编码导致所有柱子挤在同一位置，以及选择器的默认过滤逻辑未处理"未选择"状态。以下是具体修复方案：

修复步骤 #

• 添加x轴编码：在encoding中加入绑定Country的x字段，让每个国家的柱子占据独立的x轴位置，从根源避免堆叠
• 调整选择器与过滤逻辑：将选择器的"null"选项改为"all"，并修改filter规则，选择"all"时显示所有国家数据，选择特定国家时仅展示对应内容
• 优化布局适配：调整画布宽度与柱子宽度，保证多国家显示时的布局美观

修改后的完整代码 #

{"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "https://raw.githubusercontent.com/ConorQuah/ConorQuah.github.io/main/Happiness%26liberties_s%26e.csv"
  },
  "title": {
    "text": "Happiness and Liberty",
    "subtitle":"view the happiness of different countries. Notice how the colour of the bar changes!",
    "subtitleFontStyle":"italic",
    "subtitleFontSize":10,
    "anchor": "start"
  },
  "height": 300,
  "width": 600,
  "transform": [
    {"filter": {"or": [
      {"selection": "Region"},
      {"param": "Region", "equal": "all"}
    ]}}
  ],
  "selection": {
    "Region": {
      "type": "single",
      "fields": ["Country"],
      "bind": {
        "input": "select",
        "options": [
          "all",
          "Finland",
          "Sweden",
          "New Zealand",
          "United Kingdom",
          "Serbia",
          "Zimbabwe",
          "Afghanistan"
        ],
        "name": "Select a country"
      },
      "init": {"Country": "all"}
    }
  },
  "mark": {"type": "bar", "width": 40},
  "encoding": {
    "color": {
      "field": "Civil liberties",
      "title": "Civil liberties",
      "scale":{"scheme":"redyellowgreen", "domain":[0,60]},
      "type": "quantitative"
    },
    "y": {
      "field": "Happiness", 
      "scale": {"domain": [0,10]},
      "type": "quantitative",
      "title": "Happiness"
    },
    "x": {
      "field": "Country",
      "type": "nominal",
      "title": "Country"
    }
  }
}

关键修改说明 #

1. x轴编码：新增的x字段为每个国家分配独立的柱子位置，彻底解决堆叠问题
2. 过滤逻辑优化：通过or条件实现双向判断，选择"all"时跳过过滤展示全部数据，选择特定国家时精准过滤
3. 默认值设置：init属性让选择器默认选中"all"，打开图表时直接展示完整数据视图
4. 布局调整：加宽画布并适配柱子宽度，避免多国家显示时的布局拥挤

内容的提问来源于stack exchange，提问作者Conor Quah