在散布散点图中，相同变量的标记未连续连接

Question

我正在尝试通过plotly_graph_objs和破折号绘制折线图。

当我绘制数据并基于范围为1到100的xaxis连接每个点时，该线不会立即连接这些点。这意味着，该线仅连接了xaxis的某些值，而另一条线则连接了其他值。 连接未按升序处理。一个连接xaxis 1和100，另一个连接2至10，依此类推。

如果点处于相同状态，我认为点应在图中一次连续连接。但是我不能自己弄清楚。 我该如何解决？

我已经做的是： 1.按xaxis排序数据， 2.将xaxis更改为数字，

'''

df

'''
class_mid   class_sub   class_ssub  yr  a   b   c   d   e
percentile  .   1   2016    319 315 302 301 313
...
percentile  .   100 2016    332 349 337 389 388
percentile  .   100 2017    345 349 351 408 402
percentile  .   100 2018    357 353 356 419 415
percentile  .   100 2019    365 375 369 451 442
decile      .   1   2016    345 349 351 408 402
...
decile      .   10  2019    378 423 502 403 322

'''

'''

布局说明

'''
id: main_graph: dcc.Graph /
id: var:    dcc.Dropdown -> choice one of [a, b, c, d, e] /
id: yr:     dcc.Rangeslider -> min=1998, max=2020 /
id: class_mid:  dcc.Dropdown -> choice percentile or decile
'''

'''

import datetime
import math
import pandas as pd
from flask import Flask
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import plotly.graph_objs as go

@app.callback(
    Output('main_graph', 'figure'),
    [Input('var', 'value'),
     Input('yr', 'value'),
     Input('class_mid', 'value')])
def update_main_graph(var, yr_slider, class_mid):

    traces=[]
    for i in range(int(yr_slider[0]), int(yr_slider[1])):
        if var == 'percentile':
            g = df[[var, 'class_mid', 'class_ssub', 'yr']]
            g = g[g['class_mid'].isin(['percentile'])]
            g['class_ssub'] = pd.to_numeric(g['class_ssub'])
            g = g.sort_values(['yr', 'class_ssub'])
            traces.append(
                go.Scatter(
                    x=g[g['class_mid'] == class_mid]['class_ssub'].unique(),
                    y=g[g['yr'] == i][var],
                    mode='lines+markers',
                )
            )

    figure = go.Figure(data = traces)

    return figure

当我在Rangeslider上选择年份时，我期望一个折线图， 但实际是两行或更多行。