Объект R Shiny HTML отображается на каждой tabPanel () - PullRequest
Новая
       21

Объект R Shiny HTML отображается на каждой tabPanel ()

3 голосов
/ 14 июля 2020

Я пытаюсь создать блестящее приложение, в котором пользователи могут загружать свои собственные данные и получать визуализацию сетевой динамики в своих данных. Я использую функцию render.d3movie() из пакета ndtv для создания объекта HTML из сети с некоторыми параметрами ввода пользователем. Я хочу отобразить этот объект HTML в одном из моих tabPanel() s, но, как ни странно, он появляется на каждой панели . Я пробовал использовать другой файл HTML, и он отлично работает. Чтобы воспроизвести это, вам необходимо загрузить файлы test и сетевой анимации html и поместить их в тот же каталог, что и пример блестящего кода приложения ниже.

Пример: 

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

    navbarPage("ShinyExample",
        
        tabPanel("TEST", HTML("FirstPage"), includeHTML("test.html")),
        
        tabPanel("TEST2", HTML("SecondPage"), includeHTML("NetworkAnimation.html"))
  
    )

)

# Define server logic required to draw a histogram
server <- function(input, output) {

    # Stuff to render and save the network Animation happens here

}

# Run the application 
shinyApp(ui = ui, server = server)

Ожидаемое поведение:

test.html и NetworkAnimation.html должны отображаться только в пределах их соответствующих tabPanel()

Наблюдаемое поведение:

test.html отображается только в соответствующей tabPanel (), но NetworkAnimation.html отображается на обоих tabPanel() s

1 Ответ

2 голосов
/ 17 июля 2020

Сетевой виджет добавляется к телу в NetworkAnimation.html - Javascript: target = d3.select('body').append('div').style({width: '100%', height: '100%'}).node();.

Если вы хотите, чтобы он был только на вкладке 2, вы можете включить div с id и изменить строку JavaScript, чтобы она добавлялась к вашему div.

Мое приложение выглядит так: 

ui <- fluidPage(
  ## Include shinyjs
  useShinyjs(),
  ## Set ID of navbarPage
  navbarPage("ShinyExample", id = "navid",
             tabPanel("TEST", includeHTML("test.html")),
             tabPanel("TEST2",
                      ## Include new DIV here & Set initial height
                      div(id="appendhere", style="height: 1090px;"), 
                      includeHTML("NetworkAnimation.html"))
  )
)
server <- function(input, output) {
    observe({
        req(input$navid == "TEST2")
        runjs('$("#appendhere").resize()')
    })
}

# Run the application
shinyApp(ui = ui, server = server)

, а JS заменяется на 

target = d3.select('#appendhere').append('div').style({width: '100%', height: '100%'}).node();

Мне также пришлось включить shinyjs, чтобы запустить JavaScript, когда TAB2 активен. Ширина / высота svg вычисляется при рендеринге и поэтому изначально 0 (или фактически -60). Если вы удалите строку runjs, вы увидите, что сеть не видна.

При изменении размера браузера сеть перерисовывается, а ширина / высота обновляются. Поэтому мы вызываем $("#appendhere").resize(), когда TAB2 активен.

В консоли браузера по-прежнему отображается следующая ошибка, но, похоже, все работает нормально.

Uncaught TypeError: a is undefined

...