如何在不重新加载图中虚线的情况下更新地图框内的信息

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自然相差甚远。 但是，到目前为止，框架本身似乎还没有有效的方法。