Vega Chloropleth地图Rank值显示为0的修复方案咨询

你的地图里Rank字段显示为0，核心问题出在CSV数据类型未明确指定和Lookup匹配失败后的数值处理上，以下是分步修复方案：

1. 强制CSV中Rank字段为数值类型 #

CSV文件默认会把数字解析成字符串，Vega-Lite在量化编码时可能误将无法转换的字符串（或空值）显示为0。修改CSV数据源的格式配置，明确指定Rank为数值类型：

"data": {
  "url": "https://raw.githubusercontent.com/tomiwav/tomiwav.github.io/main/datarank.csv",
  "format": {
    "type": "csv",
    "parse": {"Rank": "number"}
  }
}

2. 处理Lookup匹配失败的情况 #

如果地理数据中的国家名称和CSV里的名称不完全匹配（比如大小写、空格差异），Lookup会返回null，Vega-Lite默认将其量化为0。添加calculate转换，把null替换为NaN，这样未匹配的国家会保持你设置的浅灰色填充，不会显示0：

"transform": [
  // 原有的Lookup转换
  {
    "lookup":"properties.name",
    "from":{
      "key": "Country",
      "fields": ["Rank"],
      "data":{
        "url": "https://raw.githubusercontent.com/tomiwav/tomiwav.github.io/main/datarank.csv",
        "format":{
          "type":"csv",
          "parse": {"Rank": "number"} // 加上类型解析
        }
      }
    }
  },
  // 新增：将null转为NaN
  {"calculate": "datum.Rank ?? NaN", "as": "Rank"}
]

3. 优化工具提示格式 #

你的Rank是整数排名，用.2f格式会显示成类似1.00的冗余格式，改成整数格式更合理：

{"field":"Rank","type":"quantitative","title":"Number of Crypto Owners","format": "d"}

修改后的完整代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title":{
    "text": "Crypto Ownership Worldwide",
    "subtitle": "Source: FILL",
    "anchor": "start"
  },
  "width":500,
  "height":400,
  "data": {
    "url": "https://raw.githubusercontent.com/tomiwav/tomiwav.github.io/main/custom.geo%20(3).json",
    "format":{"property": "features"}
  },
  "projection":{"type": "mercator"},

  "transform": [
    {
      "lookup":"properties.name",
      "from":{
        "key": "Country",
        "fields": ["Rank"],
        "data":{
          "url": "https://raw.githubusercontent.com/tomiwav/tomiwav.github.io/main/datarank.csv",
          "format":{
            "type":"csv",
            "parse": {"Rank": "number"}
          }
        }
      }
    },
    {"calculate": "datum.Rank ?? NaN", "as": "Rank"}
  ],

  "mark":{
    "type": "geoshape",
    "fill":"lightgray",
    "stroke":"black",
    "strokeWidth":0.5
  },

  "encoding": {
    "color": {
      "field": "Rank",
      "type": "quantitative",
      "scale": {
        "domain":[234,1],
        "scheme": "oranges"
      }
    },
    "tooltip":[
      {"field":"properties.name", "title":"Country"},
      {"field":"Rank","type":"quantitative","title":"Number of Crypto Owners","format": "d"}
    ]
  },
  "config": {"mark": {"invalid": null}}
}

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