Plotly中添加连接散点标记的Scatter轨迹并解决缩放失效问题

我正在用Plotly创建包含多轨迹的图表，其中每组包含两个仅显示标记的轨迹（基础轨迹和上方叠加轨迹），尝试用符号42（线条样式）的中间轨迹连接对应标记，但缩放图表时，这个线条标记会按比例缩小，无法持续连接对应标记。同时希望中间轨迹和另外两个轨迹同属一个legendgroup。当前代码如下：

url = 'https://archive.ics.uci.edu/ml/machine-learning-databases/iris/iris.data'
iris_df = pd.read_csv(url,header=None,encoding='utf-8')
iris_df.columns = ['sepal length','sepal width','petal length', 'petal width', 'class']

test_fig =  go.Figure()

class_colors = {'Iris-setosa':'blue', 'Iris-versicolor':'green', 'Iris-virginica':'purple'}

for group in iris_df['class'].unique():
    iris_df_class = iris_df[iris_df['class']==group]
    test_fig.add_trace(go.Scatter(x=iris_df_class['sepal length'],
                                 y= iris_df_class['petal length'],
                                 mode='markers',
                                 marker=dict(size=10, color=class_colors[group], symbol=1),
                                 name='trace1 '+group,
                                 showlegend=True,
                                 legendgroup=group))

    test_fig.add_trace(go.Scatter(x=iris_df_class['sepal length'],
                                 y= iris_df_class['petal length']+0.5,
                                 mode='markers',
                                 marker=dict(size=10, color='red', symbol=5),
                                 name='trace2',
                                 showlegend=False,
                                 legendgroup=group))

    test_fig.add_trace(go.Scatter(x=iris_df_class['sepal length'],
                                 y= iris_df_class['petal length']+0.2,
                                 mode='markers',
                                marker_line_width = 2,
                                 marker=dict(size=20, color='black', symbol=42),
                                 name='trace-intermediate',
                                 showlegend=False,
                                 legendgroup=group))

test_fig.show()

修改方案 #

用标记符号模拟线条会受图表缩放影响，正确做法是创建专门的线条轨迹连接每组的对应点，这样线条宽度固定，缩放时始终保持连接状态。修改后的代码如下：

import pandas as pd
import plotly.graph_objects as go

url = 'https://archive.ics.uci.edu/ml/machine-learning-databases/iris/iris.data'
iris_df = pd.read_csv(url, header=None, encoding='utf-8')
iris_df.columns = ['sepal length','sepal width','petal length', 'petal width', 'class']

test_fig = go.Figure()

class_colors = {'Iris-setosa':'blue', 'Iris-versicolor':'green', 'Iris-virginica':'purple'}

for group in iris_df['class'].unique():
    iris_df_class = iris_df[iris_df['class']==group]
    # 基础标记轨迹
    test_fig.add_trace(go.Scatter(x=iris_df_class['sepal length'],
                                 y= iris_df_class['petal length'],
                                 mode='markers',
                                 marker=dict(size=10, color=class_colors[group], symbol=1),
                                 name='trace1 '+group,
                                 showlegend=True,
                                 legendgroup=group))

    # 上方叠加标记轨迹
    test_fig.add_trace(go.Scatter(x=iris_df_class['sepal length'],
                                 y= iris_df_class['petal length']+0.5,
                                 mode='markers',
                                 marker=dict(size=10, color='red', symbol=5),
                                 name='trace2',
                                 showlegend=False,
                                 legendgroup=group))

    # 替换为专门的线条轨迹连接对应点
    for x, y1, y2 in zip(iris_df_class['sepal length'], 
                         iris_df_class['petal length'], 
                         iris_df_class['petal length']+0.5):
        test_fig.add_trace(go.Scatter(x=[x, x],
                                     y=[y1, y2],
                                     mode='lines',
                                     line=dict(width=2, color='black'),
                                     name='trace-intermediate',
                                     showlegend=False,
                                     legendgroup=group))

test_fig.show()

关键改动说明 #

• 移除原有的trace-intermediate标记轨迹，替换为循环创建的垂直线条轨迹，每组对应点之间画一条直线
• 线条轨迹使用mode='lines'，设置固定line.width，缩放时不会改变尺寸，始终保持连接状态
• 线条轨迹加入对应legendgroup，确保和同组的两个标记轨迹保持图例联动（点击图例时同时隐藏/显示）

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