在 Plotly 中更改 Hover/Click 上整个轨迹的颜色

Question

我在 plotly 中有当前图形（下面的 jupyter notebook 代码），并希望创建这样的效果，当您将鼠标悬停或单击每条轨迹时，整个轨迹以不同的颜色突出显示（在本例中为红色） .我尝试从 SOF: Plotly in Python: how to highlight a trace on hover? & 实现这些示例，但没有成功。如果有人能提供帮助，那就太棒了。目前每条痕迹都保持浅灰色。

import plotly.graph_objects as go

teams_list = sorted(teams_list,key=str.lower)
default_linewidth = 2
highlighted_linewidth_delta = 2

fig = go.FigureWidget() 
f.layout.hovermode = 'closest'
f.layout.hoverdistance = -1 #ensures no "gaps" for selecting sparse data

for t in teams_list:
    fig.add_trace(go.Scatter(x=elo_all.index, 
                             y=elo_all[t],
                             name=t,
                             mode='lines',
                             text=elo_all['Round'], # hover text goes here
                             line={'width': default_linewidth, 'color':'lightgrey'}))

    
fig.update_layout(
    xaxis = dict(
        tickmode = 'array',
        tickvals = [0,29,58,87,117,146],
        ticktext = [2015,2016,2017,2018,2019,2020]
    )
)


# our custom event handler
def update_trace(trace, points, selector):
    # this list stores the points which were clicked on
    # in all but one event they it be empty
    if len(points.point_inds) > 0:
        for i in range( len(fig.data) ):
            fig.data[i]['line']['color'] = 'red'



# we need to add the on_click event to each trace separately       

for i in range(len(fig.data)):
    fig.data[i].on_hover(update_trace)

# show the plot
fig.show()

Answer 1

事实证明，这是一个分为两部分的问题：

我的问题是小部件扩展没有正确启用（因为我可以通过执行 jupyter nbextension list 检查，输出为空），这就是为什么没有 .show() 和为什么 on_click 函数不起作用。您可以通过首先检查 jupyter nbextension 列表来解决这个问题，如果它是空的，您可以在您的 conda env 中尝试：

jupyter nbextension enable --py widgetsnbextension

我将上面的脚本修改为下面的脚本，效果很好，遗憾的是我还没有它的 gif 动图。

    import plotly.graph_objects as go
    
    teams_list = sorted(teams_list,key=str.lower)
    default_linewidth = 2
    highlighted_linewidth = 3
    
    fig = go.FigureWidget() # hover text goes here
    fig.layout.hovermode = 'closest'
    fig.layout.hoverdistance = -1 #ensures no "gaps" for selecting sparse data
    
    for t in teams_list:
        fig.add_trace(go.Scatter(x=elo_all.index, 
                                 y=elo_all[t],
                                 name=t,
                                 mode='lines',
                                 text=elo_all['Round'],
                                 opacity=0.3,
                                 line={'width': default_linewidth, 'color':'grey'}))
    
        
    fig.update_layout(
        xaxis = dict(
            tickmode = 'array',
            tickvals = [0,29,58,87,117,146],
            ticktext = [2015,2016,2017,2018,2019,2020]
        )
    )
    
    fig.update_yaxes(range=[1350, 1650])
    
    # our custom event handler
    def update_trace(trace, points, selector):
        if len(points.point_inds)==1:
            i = points.trace_index
            for x in range(0,len(fig.data)):
                fig.data[x]['line']['color'] = 'grey'
                fig.data[x]['opacity'] = 0.3
                fig.data[x]['line']['width'] = default_linewidth
            #print('Correct Index: {}',format(i))
            fig.data[i]['line']['color'] = 'red'
            fig.data[i]['opacity'] = 1
            fig.data[i]['line']['width'] = highlighted_linewidth
    
    # we need to add the on_click event to each trace separately       
    for x in range(0,len(fig.data)):
        fig.data[x].on_click(update_trace)
    
    # show the plot
    fig

在 Plotly 中更改 Hover/Click 上整个轨迹的颜色

Change Color of an Entire Trace on Hover/Click in Plotly

python

plotly

jupyter-notebook

plotly-python