本文详解如何修复 plotly 原生下拉菜单导致的地图数据错位问题，通过 dash 构建真正动态过滤的县级人口 choropleth 地图，确保每次筛选后仅显示符合条件的县，并正确关联其地理编码与人口数值。
本文详解如何修复 plotly 原生下拉菜单导致的地图数据错位问题，通过 dash 构建真正动态过滤的县级人口 choropleth 地图，确保每次筛选后仅显示符合条件的县，并正确关联其地理编码与人口数值。
在使用 Plotly 的 px.choropleth 绘制美国县级人口地图时，若直接通过 updatemenus + restyle 方式切换 z（颜色映射值），会引发严重逻辑错误：地图仍渲染全部 GeoJSON 区域，但强行将截断后的子集数值（如 less_50K['County Pop 2022']）按原始 locations='FIPS' 顺序一一映射——导致 FIPS 编码与人口值错位（例如 King 县被错误赋予 Wahkiakum 县的 4688 人）。根本原因在于 restyle 不改变 locations 和 geojson 的拓扑结构，仅替换颜色数组，而子集 DataFrame 的索引已不连续，无法对齐原始地理要素顺序。
✅ 正确解法是：每次筛选都生成一个全新、独立的 choropleth 图形对象，确保 locations（FIPS）、color（对应人口）和 geojson 中匹配的 features 三者严格一致。Dash 的回调机制天然支持这一模式。
以下是完整、可运行的解决方案：
✅ 步骤 1：准备数据与地理信息
import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import requests
import json
import pandas as pd
# 加载并过滤华盛顿州 GeoJSON（FIPS 前两位为 '53'）
r = requests.get('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json')
counties = json.loads(r.text)
counties['features'] = [
f for f in counties['features']
if f['properties']['STATE'] == '53'
]
# 确保你的数据中 'FIPS' 列为字符串且长度为 5（如 '53033'），与 GeoJSON 中的 'id' 或 'FIPS' 属性一致
grouped_fips_pop['FIPS'] = grouped_fips_pop['FIPS'].astype(str).str.zfill(5)✅ 步骤 2：构建 Dash 应用布局
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1("2022 Population in Washington State", style={'textAlign': 'center'}),
# 下拉筛选器
html.Div([
html.Label("Filter by Population Range:", style={'font-weight': 'bold', 'margin': '10px 0'}),
dcc.Dropdown(
id='population-filter',
options=[
{'label': 'All Counties', 'value': 'all'},
{'label': 'Less than 50,000', 'value': 'lt_50k'},
{'label': '50,000 – 99,999', 'value': '50k_100k'},
{'label': '100,000 or More', 'value': 'gt_100k'}
],
value='all',
clearable=False,
style={'width': '300px'}
)
], style={'textAlign': 'center', 'margin': '20px 0'}),
# 地图容器
dcc.Graph(id='choropleth-map')
])✅ 步骤 3：定义回调函数（核心逻辑）
@app.callback(
Output('choropleth-map', 'figure'),
Input('population-filter', 'value')
)
def update_choropleth_map(selected_filter):
# 动态过滤数据
if selected_filter == 'all':
filtered_df = grouped_fips_pop.copy()
elif selected_filter == 'lt_50k':
filtered_df = grouped_fips_pop[grouped_fips_pop['County Pop 2022'] < 50000].copy()
elif selected_filter == '50k_100k':
mask = (grouped_fips_pop['County Pop 2022'] >= 50000) & \
(grouped_fips_pop['County Pop 2022'] < 100000)
filtered_df = grouped_fips_pop[mask].copy()
else: # 'gt_100k'
filtered_df = grouped_fips_pop[grouped_fips_pop['County Pop 2022'] >= 100000].copy()
# 关键：为每个筛选结果重建完整 choropleth 图
fig = px.choropleth(
filtered_df,
geojson=counties,
locations='FIPS', # 严格匹配 GeoJSON 中的 'id' 或 properties.FIPS
color='County Pop 2022',
color_continuous_scale='Viridis',
range_color=(grouped_fips_pop['County Pop 2022'].min(),
grouped_fips_pop['County Pop 2022'].max()),
scope='usa',
labels={'County Pop 2022': 'Population'},
hover_name='County',
hover_data=['County Pop 2022']
)
# 优化地图投影与布局
fig.update_geos(
fitbounds="locations",
visible=False,
projection_type='albers usa',
projection_scale=5,
center={"lat": 47.5, "lon": -120}
)
fig.update_layout(
margin={"r": 0, "t": 40, "l": 0, "b": 0},
title={
'text': f"2022 Population in Washington State ({selected_filter.replace('_', ' ').title()})",
'x': 0.5,
'xanchor': 'center'
}
)
return fig✅ 启动应用
if __name__ == '__main__':
app.run_server(debug=True, port=8050)⚠️ 关键注意事项
- FIPS 格式必须严格一致：GeoJSON 中的 features[i]['id'] 或 features[i]['properties']['FIPS'] 必须与 DataFrame 的 locations 列完全匹配（通常为 5 位字符串，如 '53033'）。使用 .astype(str).str.zfill(5) 强制标准化。
- 不要复用 fig 对象：避免在回调外创建 fig 并尝试 restyle/relayout —— 这是原问题根源。Dash 回调应返回全新图形对象。
- range_color 固定全局范围：保持色阶统一（使用全量数据的 min/max），便于跨筛选比较。
- 性能提示：对于超大数据集，可在回调内添加 filtered_df = filtered_df.reset_index(drop=True) 避免潜在索引干扰。
该方案彻底规避了 Plotly 原生下拉菜单的映射陷阱，以声明式、可维护的方式实现精准地理数据可视化，是构建生产级交互地图的标准实践。
