Plotly/Dash - 如何创建两个图，其中一个图定义了另一个的显示窗口？

如何解决Plotly/Dash - 如何创建两个图，其中一个图定义了另一个的显示窗口？

如何在情节（和/或破折号）中编码以下点击事件？让我们假设我们有两个图（例如一个子图或任何其他有效的图）。当用户在顶部图内点击（在一个点上或中间的任何地方）时，点击事件的 x 值（让其命名为 xclick）应该被注册并用于更新 x-底部绘图中窗口的轴范围（即显示从 xclick - 50 到 xclick + 50 的范围）。

为了更清楚地说明这一点，这里是一些生成时间序列的示例代码（想法是在底部图中显示它的一个窗口）及其局部最大值的距离（显示在顶部图中，理想情况下是一个单击将定义底部绘图的窗口）：

library(plotly)
library(ggplot2)

# generate some random and relatively smooth time series
set.seed(114)
M <- 1000
r <- rnorm(M)
y <- cumsum(r)
x <- 1:length(y)
y <- loess(y~x,span = 0.15)$fitted

# cacluate the local maxima of time series
peaks <- ggpmisc:::find_peaks(y)
xpeaks <- x[peaks]

# plot 1: distances between local maxima of the time series
y1 <- xpeaks[2:length(xpeaks)]-xpeaks[1:(length(xpeaks)-1)]      # distance between successive peaks
x1 <- (xpeaks[2:length(xpeaks)]+xpeaks[1:(length(xpeaks)-1)])/2  # midpoint of successive peaks
data1 <- data.frame(y=y1,x=x1)
g1 <- ggplot(data1,aes(y=y,x = x)) + geom_point()
p1 <- ggplotly(g1)

# plot 2: window of the timeseries
x2 <- xpeaks[3] # here it is just some value,but x2 should become the clicked x-value in plot 1
timewindow <- (x2-50):(x2+50)  # select +-50 points around x2 to display
data2 <- data.frame(y=y[timewindow],x = x[timewindow])
g2 <- ggplot(data2,aes(x= x,y = y)) + geom_line()
p2 <- ggplotly(g2)

subplot(p1,p2,nrows = 2,heights = c(0.8,0.2))

从视觉上看，这就是我希望实现的目标：

感谢您的热心帮助！任何小提示表示赞赏。

解决方法

您将不得不利用绘图破折号回调功能。

https://dash.plotly.com/advanced-callbacks

我将带您了解我最近所做的一个 Python 示例。抱歉，它不在 R 中，但希望您能填补空白。

我的构建的基础是我点击地图，它会在本周末的得分图上发生变化。

@app.callback(
    [Output('weekend_score','figure'),Output('map','figure')],[Input('weekend_score','clickData')
    Input('map','clickData'),Input('map','selectedData'))

这个回调的输入是我的地图点击或选择事件。

ctx = dash.callback_context
if ctx.triggered[0]['prop_id'] == 'weekend_score.clickData':
     ws_indexes = [int(ws_data['points'][0]['curveNumber'])]
elif ctx.triggered[0]['prop_id'] == 'map.clickData':
     indexes = [map_data['points'][0]['location']]
elif ctx.triggered[0]['prop_id'] == 'map.selectedData':
     indexes = [x['location'] for x in map_selection['points']]

然后我查看我的实际事件，看看是什么触发了它。根据是点击还是选择，我可以去获取在我的地图上选择的索引。

return weekend_score_callback(session_id,ws_indexes),\
        get_map(map_indexes,session_id)

在访问我的索引后，我将这些索引返回给重建我的地图和周末得分图的函数。现在真正棘手的事情是首先构建您的绘图，以便您可以从回调中识别它们，然后根据这些来更改它们。对我来说，我的地图和趋势线中的每个对象都有一个唯一标识符。例如，如果我点击 ID=1 的地图对象，那么它会通过回调并在我的周末得分回调函数中结束，然后我进入我的数据框，只拉出 ID=1 的数据点并在我的周末得分上绘制它情节。