0

我正在使用 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 的技术。

4

1 回答 1

0

您可以从dash 核心组件基于Graph制作自定义组件，并修改 plotly hover 事件处理程序以发送 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 的自然方式相去甚远。但似乎框架本身没有有效的方法（到目前为止）。

于 2017-09-05T08:37:42.600 回答