Question

我使用plotly的破折号尝试构建一个包含两个小部件的简单仪表板 - 图形和地图（基于mapbox）。图形数据点和地图上的位置彼此连接，并且当用户的鼠标悬停在图形上的相关点上时，我想要突出显示地图上的相关点。

我尝试使用以下布局的dash回调：

@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

以下回调：

mydcc

请注意，我意识到我应该删除旧的突出显示的点 - 但这不是重点。

这可以解决问题，但需要不断重新加载地图框图，这会破坏用户体验。我想要的只是改变地图中的痕迹而不重新加载整个图形。

我尝试使用from scrapy.item import Item, Field from scrapy.http import FormRequest from scrapy.spider import Spider class ExampleSpider(Spider): name = "examplecsv" allowed_domains = ["examplewebsite.com"] start_urls = ["https://www.examplewebsite.com"] def parse(self, response): with open('addresses.csv') as fp: for i, line in enumerate(fp, start=1): yield FormRequest.from_response(response, formdata={'examplesearchfield':line}, clickdata={'id': 'clickexamplesearch'}, callback=self.parse1, meta={'lineno': i}) def parse1 (self, response): for title in response.css('title'): yield { 'title':title.css('title::text').re(r'^[^|]+(?=|)'), 'lineno': response.meta['lineno'] }模块，该模块只允许更新数据而无需重新加载整个数字，但是当地图上有数千条痕迹时，它仍然运行缓慢。

我想知道是否有办法克服这个问题？我也愿意使用其他类似的基于python的技术。

Answer 1

您可以根据Graph中的dash core components制作自定义组件，并修改情节悬停事件处理程序以发送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);

检查documentation for addTraces

中的功能声明

是的，我意识到我的解决方案远非Dash自然的方式。但似乎框架本身没有有效的方法（到目前为止）。

如何更新地图框中的信息而无需重新加载图表破折号中的数字

1 个答案: