如何实现px.scatter_mapbox图表中指定线段的高亮效果？

问题分析 #

你之前尝试用update_traces的selectedpoints参数高亮筛选后的点，但所有点变红，核心原因是：selectedpoints仅针对散点的选中状态，无法直接控制线段高亮；如果你的scatter_mapbox只有散点标记，本身就不存在线段，自然无法实现线段高亮需求。要实现轨迹线段的高亮，需要调整图表结构和回调逻辑。

可行方案 #

核心思路：用line_mapbox绘制完整轨迹，额外添加一个空的高亮线段trace，通过折线图缩放获取的时间范围筛选数据，动态更新高亮trace的内容，实现指定线段的高亮。同时可保留散点标记辅助显示。

代码示例 #

import dash
from dash import dcc, html, Input, Output, State
import plotly.express as px
import pandas as pd

# 模拟带时间、经纬度的轨迹数据
df = pd.DataFrame({
    'time': pd.date_range(start='2024-01-01', periods=100, freq='H'),
    'lat': pd.Series(range(100)).apply(lambda x: 30 + x*0.01),
    'lon': pd.Series(range(100)).apply(lambda x: 120 + x*0.01)
})

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id='line-chart', figure=px.line(df, x='time', y='lat', title='时间序列折线图')),
    dcc.Graph(id='map-chart', style={'height': '600px'})
])

@app.callback(
    Output('map-chart', 'figure'),
    Input('line-chart', 'relayoutData'),
    State('map-chart', 'figure')
)
def update_map_highlight(relayout_data, current_fig):
    # 初始化地图图表：基础轨迹+散点+空高亮线段
    if not current_fig:
        # 绘制基础轨迹线
        fig = px.line_mapbox(
            df, lat='lat', lon='lon',
            zoom=10, mapbox_style='carto-positron',
            title='轨迹地图'
        )
        # 添加轨迹点标记
        fig.add_scattermapbox(
            lat=df['lat'], lon=df['lon'],
            mode='markers', marker=dict(size=6, color='blue'),
            name='轨迹点'
        )
        # 添加用于高亮的空线段trace
        fig.add_scattermapbox(
            lat=[], lon=[],
            mode='lines', line=dict(width=4, color='#ff4444'),
            name='高亮轨迹段'
        )
        return fig

    # 从折线图缩放事件中提取时间范围
    if relayout_data and 'xaxis.range[0]' in relayout_data and 'xaxis.range[1]' in relayout_data:
        try:
            start = pd.to_datetime(relayout_data['xaxis.range[0]'])
            end = pd.to_datetime(relayout_data['xaxis.range[1]'])
            # 筛选时间范围内的轨迹数据
            filtered = df[(df['time'] >= start) & (df['time'] <= end)]
            # 更新高亮线段的数据
            current_fig['data'][2]['lat'] = filtered['lat'].tolist()
            current_fig['data'][2]['lon'] = filtered['lon'].tolist()
        except Exception as e:
            # 处理时间格式转换异常，清空高亮
            current_fig['data'][2]['lat'] = []
            current_fig['data'][2]['lon'] = []
    else:
        # 无缩放范围时清空高亮线段
        current_fig['data'][2]['lat'] = []
        current_fig['data'][2]['lon'] = []

    return current_fig

if __name__ == '__main__':
    app.run_server(debug=True)

关键说明 #

1. 图表结构设计：用px.line_mapbox绘制完整的灰色基础轨迹，叠加散点标记，再添加一个初始为空的红色高亮线段trace（放在最后，确保显示在基础轨迹上方）。
2. 回调逻辑：
   • 监听折线图的relayoutData，提取缩放后的x轴时间范围
   • 筛选对应时间范围内的轨迹数据，更新高亮线段trace的经纬度列表
   • 没有缩放范围时，清空高亮线段数据，恢复初始状态
3. 解决原问题的核心：放弃用selectedpoints控制点颜色，转而通过独立的高亮线段trace实现轨迹段高亮，这是mapbox图表中轨迹高亮的标准实现方式。

注意事项 #

• 确保时间格式统一，处理可能的时区转换问题
• 可调整高亮线段的width和color参数，优化视觉效果
• 如果不需要散点标记，可以去掉add_scattermapbox的点标记部分

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