如何在 Python Dash 中触发 mouseout 事件？答案

【问题标题】：How to trigger a mouseout event in Python Dash?如何在 Python Dash 中触发 mouseout 事件？
【发布时间】：2021-06-12 06:23:04
【问题描述】：

如何实现对mouseout 做出反应并在未将鼠标悬停在数据点上时恢复默认值的回调函数？

我简化了从 Plotly|Dash 教程的“交互式可视化”部分截取的代码来说明我的问题。在此示例中，callback 函数返回 mouseover 信息。如何在 mouseout 上返回默认值？

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame({
    "x": [1,2,1,2],
    "y": [1,2,3,4]
})

fig = px.scatter(df, x="x", y="y") 
fig.update_traces(marker_size=20)

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig
    ),
    html.Div([
        html.Pre(id='hover-data')
    ])
])

@app.callback(
    Output('hover-data', 'children'),
    Input('basic-interactions', 'hoverData'))
def display_hover_data(hoverData):
    if hoverData:
        return str(hoverData)
    else:
        return "hover over data point"

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

【问题讨论】：

标签： python callback mouseover plotly-dash mouseout

【解决方案1】：

您可以在dcc.Graph 上设置clear_on_unhover 属性：

clear_on_unhover（布尔值；默认为 False）：如果为 True，则当用户从某个点“悬停”时，clear_on_unhover 将清除 hoverData 属性。如果为 False，则 hoverData 属性将等于最后一个悬停点的数据。

所以改变这个：

dcc.Graph(id="basic-interactions", figure=fig)

到这里：

dcc.Graph(id="basic-interactions", figure=fig, clear_on_unhover=True)

悬停时hoverData 将等于None，因此示例中的回调可以保持不变。 "hover over data point" 将在悬停时返回。

【讨论】：