如何在不重新加載圖中虛線的情況下更新地圖框內的信息

Question

我正在使用plotly的破折號來嘗試構建一個簡單的儀表板，其中包含兩個小部件-圖形和地圖（基於mapbox）。 圖形數據點和地圖上的位置相互連接，當用戶的鼠標懸停在圖形上的相關點上時，我想突出顯示地圖上的相關點。

我試過使用破折號的回調與以下布局：

app = dash.Dash()
app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    ''', id='xxx'),

    dcc.Graph(
        id='example-graph',
        figure=sl.draw_graph('Altitude')

    ),
    dcc.Graph(
        id='example-map',
        figure=sl.draw_map()
    ),

])

和以下回調：

@app.callback(
    Output('example-map', 'figure'),
    [Input('example-graph', 'hoverData')])

def display_hover_data(hoverData):
    figure = app.layout['example-map'].figure
    figure['data'].append(get_new_highlighted_dot(hoverData))
    return figure

請注意，我意識到我應該刪除舊的高亮點-但這不是重點。

這可以解決問題，但需要不斷重新加載mapbox圖形，這會破壞用戶體驗。 我想要的只是更改地圖中的跡線而無需重新加載整個圖形。

我嘗試使用mydcc模塊，該模塊僅允許更新數據而無需重新加載整個圖形，但是當在地圖上有成千上萬條跡線時，它仍然運行緩慢。

我想知道是否還有克服這些問題的方法？ 我也願意使用其他類似的基於python的技術。

Answer 1

您可以從儀表板核心組件中基於Graph創建自定義組件，並修改繪圖懸停事件處理程序以發送Ajax請求並獲取新點。

gd.on('plotly_hover', (eventData) => {
    const hoverData = filterEventData(gd, eventData, 'hover');
    if (!isNil(hoverData)) {
        // get data and redraw plot
        ajax_update_plot(id, hoverData); 

        if (setProps) setProps({hoverData});
        if (fireEvent) fireEvent({event: 'hover'})
    }
});

在ajax_update_plot中，使用常規AJAX方式從服務器檢索數據，並使用更新后的數據更新圖。

// get new point and add it to the graph
Plotly.addTraces(id, point);

檢查文檔中的函數聲明中是否存在addTraces

是的，我意識到我的解決方案與Dash自然相差甚遠。 但是，到目前為止，框架本身似乎還沒有有效的方法。