在 shinyBS 包中使用 bsModal 和 plotly R plotly_click 在弹出窗口中生成新图答案

【问题标题】：Use bsModal in the shinyBS package with plotly R plotly_click to generate new plot in pop up在 shinyBS 包中使用 bsModal 和 plotly R plotly_click 在弹出窗口中生成新图
【发布时间】：2016-08-22 05:02:17
【问题描述】：

这是我使用plotly_click 事件选择性地显示另一个情节的基本闪亮应用程序的代码。我希望该侧箱图在模式弹出窗口中呈现，而不是在页面内的一侧。

library(shiny)
library(plotly)

df1 <- data.frame(x = 1:10, y = 1:10)
df2 <- data.frame(x = c(rep('a', 10), rep('b', 10)),
                  y = c(rnorm(10), rnorm(10, 3, 1)))

ui <- fluidPage(
  column(6, plotlyOutput('scatter')),
  column(6, plotlyOutput('box'))
)

server <- function(input, output) {
  output$scatter <- renderPlotly({
    plot_ly(df1, x = x, y = y, mode = 'markers', source = 'scatter')
  })

  output$box <- renderPlotly({
    eventdata <- event_data('plotly_click', source = 'scatter')
    validate(need(!is.null(eventdata),
                  'Hover over the scatter plot to populate this boxplot'))


    plot_ly(df2, x = x, y = y, type = 'box')
  })
}

shinyApp(ui = ui, server = server)

我能够关注这个问题 (Shiny: plot results in popup window) 和响应，并尝试将其与 plotly_click 的 trigger 一起使用，但没有成功。知道如何通过巧妙的悬停点击事件来完成同样的事情吗？

更新：我可以清楚地看到plotly 绘图可以在shinyBS 模态弹出窗口中呈现，如此代码所示。

df1 <- data.frame(x = 1:10, y = 1:10)
ui <- fluidPage(
  actionButton('go', 'Click Go'),
  bsModal('plotlyPlot', 'Here is a Plot', 'go', plotlyOutput('scatter1'))
)

server <- function(input, output) {
  output$scatter1 <- renderPlotly({
    plot_ly(df2, x = x, y = y, mode = 'markers', source = 'scatter1')
  })
}

shinyApp(ui = ui, server = server)

我希望plotly_click 或plotly_hover 作为触发器而不是actionButton（在原始示例中）。

【问题讨论】：

您对使用 JS 和 CSS 感到满意吗？

标签： r shiny plotly shinybs

【解决方案1】：

使用 CSS

您可以使用HTML builder 包含绘图并使用样式表添加动态效果。

ui <- fluidPage(
  includeCSS(path_to_css_file),
  div( class='mainchart',
    column(6, plotlyOutput('scatter')),
    div(  class='popup',
        column(6, plotlyOutput('box'))
       )
    )
)

CSS

div.popup {
   display : none;
   position: absolute;
}
div.mainchart : focus > div.popup {
   display : block;
}
div.mainchart {
   position: relative;
}

使用 Javascript

您可以使用 plotly embeded-API 来设置边箱的可见性。

闪亮的BS

既然你想坚持使用shinyBS，你可以使用bsPopover 函数，有点技巧。我假设您已经知道如何使用bsModel，它类似于下面的示例。

将以下参数传递给fluidPage

bsTooltip(id, title, placement = "bottom", trigger = "click", content=column(6, plotlyOutput('box'))  )

这将使用Popover 包装器创建绘图。我还没有测试它。万一出错，也可以试试

options = list()
options$content = column(6, plotlyOutput('box'))
options$html = T # otherwise the conent will be converted to text
bsTooltip(id, title, placement = "bottom", trigger = "click",  options=options  )

访问shinyBS 的source file 和bootstrap 的popover(options) 函数了解更多信息。

【讨论】：

谢谢。我真的很想避免做 HTML/CSS。此外，不确定这是否会调用另一个绘图“提供”单击悬停点的数据。在第一个绘图中，我将鼠标悬停在一个特定的数据点上，并展示与该绘图相关的数据的更多详细信息。我简化了上面的示例以集中问题。
我是否正确理解您只想在悬停在特定数据点上时显示边框？你可以接受 Javascript 吗？
没错。我将点的index 悬停在（或单击-实际上我正在使用plotly_click）上，并且我有另一个用该点编号索引的表，然后显示箱形图。在上面的示例中，我只有一个用于箱线图的数据集以保持简单。至于 JS，我不介意，但我真的在想办法尽可能干净地使用 shinyBS + Shiny + Plotly。
这不是一个很好的解决问题的方法，但您可以尝试创建一个动态的actionButton，它以plotly_click为条件激活bsModal。然后自动点击它并隐藏 :) 是的...这是个坏主意 :)

【解决方案2】：

您可以使用toggleModal，只需将其添加到您的服务器：

observeEvent(event_data("plotly_click", source = "scatter"), {
 toggleModal(session, "boxPopUp", toggle = "toggle")
})

并将方框 Plot 放在 bsModal 中（标题和触发器为空）：

ui <- fluidPage(
  column(6, plotlyOutput('scatter')),
  bsModal('boxPopUp', '', '', plotlyOutput('box'))
)

更新：具有闪亮的内置模态功能（自闪亮 0.14 起），只需要添加服务器：

 observeEvent(event_data("plotly_click", source = "scatter"), {
                showModal(modalDialog(
                        renderPlotly({
                                plot_ly(df2, x = ~x, y = ~y, type = 'box')
                        })
                ))
        })

【讨论】：