Dash：实现跟踪高亮回调

Question

我有一个基本的破折号应用程序，其中包含以下 app.py 文件：

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go

def generate_plot():
    fig = go.Figure()
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[1, 2, 3], name="A", line={"width": 1}))
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[1, 3, 5], name="B", line={"width": 1}))
    return fig

app = dash.Dash(__name__)
app.layout = html.Div(children=[
    html.H1(children="title", className="title"),
    dcc.Graph(figure=generate_plot(), className="plot")
])

我想在悬停时突出显示（将线宽增加到 5）轨迹。到目前为止，我已经找到了一种通过使用 go.FigureWidget 对象而不是 go.Figure 在 Jupyter notebook 中实现此目的的方法（有关更多信息，请参阅），但是，它在 Dash 中不起作用.如果有人对如何达到预期效果有任何想法，请告诉我们。

非常感谢。

Answer 1

我想我已经解决了一半的问题。

首先，如果您使用方法生成图形，则需要将其保存到单独的对象中：

my_plot = generate_plot()

其次，你需要给你的人物一个ID：

dcc.Graph(figure=my_plot, id="my_plot")

第三，你需要像这样添加一个app.callback：

@app.callback(
    dash.dependencies.Output("my_plot", "figure"),
    [dash.dependencies.Input("my_plot", "hoverData")]
)
def highlight_trace(hover_data):
    # here you set the default settings
    for trace in my_pot.data:
        country["line"]["width"] = 1
        country["opacity"] = 0.5
    if hover_data:
        trace_index = hover_data["points"][0]["curveNumber"]
        my_plot.data[trace_index]["line"]["width"] = 5
        my_plot.data[trace_index]["opacity"] = 1
    return my_plot

这会在鼠标悬停时突出显示轨迹，但它只会在您将鼠标悬停在另一条轨迹上时重置其状态（在某些情况下这可能是预期的行为）。我仍然没有想出如何在您不将鼠标悬停在它上面时立即重置跟踪外观，所以如果您对此有任何建议，请告诉我们，在那之前我会考虑这个问题未答复

编辑

好的，我想出了如何重置悬停效果：只需添加 clear_on_hover 参数，如下所示：dcc.Graph(figure=my_plot, id="my_plot", clear_on_hover=True)

非常感谢

Dash：实现跟踪高亮回调

Dash: implementing a trace highlight callback

javascript

python

data-visualization

plotly

plotly-dash