Plotly Scattermapbox仅700条数据卡顿，求性能优化方案

问题背景 #

使用Plotly和Mapbox绘制700行数据的坐标连线，每行包含一对坐标点，且需要根据col1、col2字段单独配置连线/标记的颜色、宽度、符号等样式。当前通过循环调用add_trace添加700个Scattermapbox trace，导致绘图过程卡顿、耗时过长，几乎无法使用。

DataFrame结构示例：

coordinates                              col1    col2           text
--------------------------------------------------------------------------------
[(49.20, 17.51), (49.49, 17.48)]         100     "diamond"      ["dog", "cat"]
[(51.31, 4.26), (51.26, 4.29)]           400     "diamond"      ["milk", "beer"]
[(47.09, 18.04), (47.31, 18.78)]         200     "mocca"        ["cow", "soda"]
...

当前核心代码（简化版）：

import plotly.graph_objects as go

fig = go.Figure()
for _, row in df.iterrows():
    fig.add_trace(
        go.Scattermapbox(
            mode="markers+lines+text",
            lat=list(zip(*row["coordinates"]))[0],
            lon=list(zip(*row["coordinates"]))[1],
            text=row["text"],
            textposition="top center",
            textfont=dict(size=12, color="white"),
            line=dict(
                width=2 if row["col1"] < 300 else 4,
                color="red" if row["col2"] == "diamond" else "blue"
            ),
            marker=dict(
                size=13 if row["col2"] == "diamond" else 7,
                symbol="diamond" if row["col2"] == "diamond" else "circle",
                color="red" if row["col2"] == "diamond" else "blue"
            ),
        )
    )

fig.update_layout(
    margin={"r": 0, "t": 0, "l": 0, "b": 0},
    mapbox={
        "accesstoken": mapbox_token,
        "center": {"lon": 10, "lat": 50},
        "style": "my_style",
        "zoom": 3,
    },
    showlegend=False,
)
fig.show()

优化方案 #

1. 按样式分组合并Trace（核心优化） #

Plotly的Scattermapbox支持在同一个trace中用NaN分隔独立线段，因此可以将样式完全相同的连线合并到同一个trace，把trace数量从700降至个位数（比如按col2和col1的阈值分组，最多4组），大幅减少渲染压力。

实现步骤：

• 定义分组规则：按col2（diamond/mocca）和col1 >=300的布尔值组合，分成4个样式组
• 对每个分组，将所有坐标对的lat、lon拼接成数组，每对坐标后添加NaN（用于断开线段）
• 同时整理对应的text数组，保持与坐标的对应关系

示例代码：

import plotly.graph_objects as go
import pandas as pd

# 定义分组键：(col2值, col1是否>=300)
df["style_group"] = df.apply(lambda row: (row["col2"], row["col1"] >= 300), axis=1)

fig = go.Figure()

# 遍历每个样式组
for group_key, group_df in df.groupby("style_group"):
    col2_val, is_col1_large = group_key
    
    # 初始化lat、lon、text数组
    lat_list = []
    lon_list = []
    text_list = []
    
    for _, row in group_df.iterrows():
        # 添加当前坐标对的lat和lon
        coords = row["coordinates"]
        lat_list.extend([coords[0][0], coords[1][0], None])
        lon_list.extend([coords[0][1], coords[1][1], None])
        # 添加文本（两个点的文本）+ 空值对应NaN位置
        text_list.extend(row["text"] + [None])
    
    # 移除最后一个多余的NaN（可选，不影响渲染）
    lat_list = lat_list[:-1]
    lon_list = lon_list[:-1]
    text_list = text_list[:-1]
    
    # 计算当前组的样式参数
    line_width = 4 if is_col1_large else 2
    color = "red" if col2_val == "diamond" else "blue"
    marker_size = 13 if col2_val == "diamond" else 7
    marker_symbol = "diamond" if col2_val == "diamond" else "circle"
    
    # 添加单个trace
    fig.add_trace(
        go.Scattermapbox(
            mode="markers+lines+text",
            lat=lat_list,
            lon=lon_list,
            text=text_list,
            textposition="top center",
            textfont=dict(size=12, color="white"),
            line=dict(width=line_width, color=color),
            marker=dict(size=marker_size, symbol=marker_symbol, color=color),
        )
    )

# 保持原布局配置
fig.update_layout(
    margin={"r": 0, "t": 0, "l": 0, "b": 0},
    mapbox={
        "accesstoken": mapbox_token,
        "center": {"lon": 10, "lat": 50},
        "style": "my_style",
        "zoom": 3,
    },
    showlegend=False,
)
fig.show()

2. 优化DataFrame遍历效率 #

替换iterrows()为更高效的apply()或向量化操作，减少Python层面的循环开销：

# 用apply批量处理坐标，替代iterrows
def process_coords(row):
    coords = row["coordinates"]
    return [coords[0][0], coords[1][0], None], [coords[0][1], coords[1][1], None], row["text"] + [None]

df[["lat_seg", "lon_seg", "text_seg"]] = df.apply(process_coords, axis=1, result_type="expand")

3. 简化重复配置 #

将全局统一的配置（比如textfont、textposition）提取到布局或全局trace默认值中，避免每个trace重复定义：

# 设置全局trace默认值
fig.update_traces(
    textposition="top center",
    textfont=dict(size=12, color="white")
)

迁移至React Web应用的性能影响 #

迁移至React+Plotly.js会显著提升性能，原因如下：

• Python的Plotly本质是生成静态HTML/JSON后通过浏览器渲染，中间存在数据转换和传输开销；而React直接使用plotly.js或react-plotly.js组件渲染，数据直接传递给前端，减少了中间环节。
• Plotly.js在浏览器中采用更高效的DOM渲染策略，对大量图形元素的处理比Python端的渲染引擎更优化。
• 若后续数据量进一步增大，还可以结合WebGL渲染（Plotly部分支持）或Mapbox原生图层进一步提升性能。

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