반짝이는 앱에서 여러 탭을 동적으로 선택

Question

여러 개의 크기가있는 큰 데이터 세트가 있습니다. 데이터를 여러 개의 탭 (실제로는 긴 세로 막대가 아닌)에서 선택할 수 있으면 더 사용자 친화적 인 데이터 익스플로러를 만듭니다. 나는이 개념을 최소한의 작업 예제 (아래)로 놀아 왔지만, View Plot 버튼을 클릭하면 Plot 탭으로 전환 할 수 없다. Plot 탭을 클릭하면 반응성이 작동하지만 일부 선택 사항 (예 : 클러스터 수)을 업데이트하면 반응하지 않습니다.

library(shiny) 

runApp(list(
    ui = shinyUI(fluidPage(
    headerPanel('Iris k-means clustering'), 
    mainPanel(
     tabsetPanel(
     type = "tabs", 
     tabPanel(title = "Select X", 
       selectInput('xcol', 'X Variable', names(iris)), 
       HTML("<div id='linkToY'><FORM><INPUT Type='BUTTON' VALUE='Next'></FORM></div>")), 
     tabPanel(title = "Select Y", 
       selectInput('ycol', 'Y Variable', names(iris), selected=names(iris)[[2]]), 
       HTML("<div id='linkToClusters'><FORM><INPUT Type='BUTTON' VALUE='Next'></FORM></div>")), 
     tabPanel("Select Clusters", numericInput('clusters', 'Cluster count', 3, min = 1, max = 9), 
       HTML("<div id='linkToPlot'><FORM><INPUT Type='BUTTON' VALUE='View Plot'></FORM></div>"), 
       HTML("<div id='linkToData'><FORM><INPUT Type='BUTTON' VALUE='View Data'></FORM></div>")), 
     tabPanel(title = "Plot", plotOutput('plot1')), 
     tabPanel(title = "Data", 
       dataTableOutput(outputId="table"), 
       HTML("<script>$('#linkToY').click(function() { 
         tabs = $('.tabbable .nav.nav-tabs li') 
         tabs.each(function() { 
         $(this).removeClass('active') 
         }) 
         $(tabs[1]).addClass('active') 
         tabsContents = $('.tabbable .tab-content .tab-pane') 
         tabsContents.each(function() { 
         $(this).removeClass('active') 
         }) 
         $(tabsContents[1]).addClass('active') 
         $('#summary').trigger('change').trigger('shown'); 
         })</script>"), 
       HTML("<script>$('#linkToClusters').click(function() { 
         tabs = $('.tabbable .nav.nav-tabs li') 
         tabs.each(function() { 
         $(this).removeClass('active') 
         }) 
         $(tabs[2]).addClass('active') 
         tabsContents = $('.tabbable .tab-content .tab-pane') 
         tabsContents.each(function() { 
         $(this).removeClass('active') 
         }) 
         $(tabsContents[2]).addClass('active') 
         $('#summary').trigger('change').trigger('shown'); 
         })</script>"), 
       HTML("<script>$('#linkToPlot').click(function() { 
         tabs = $('.tabbable .nav.nav-tabs li') 
         tabs.each(function() { 
         $(this).removeClass('active') 
         }) 
         $(tabs[3]).addClass('active') 
         tabsContents = $('.tabbable .tab-content .tab-pane') 
         tabsContents.each(function() { 
         $(this).removeClass('active') 
         }) 
         $(tabsContents[3]).addClass('active') 
         $('#summary').trigger('change').trigger('shown'); 
         })</script>"), 
       HTML("<script>$('#linkToData').click(function() { 
         tabs = $('.tabbable .nav.nav-tabs li') 
         tabs.each(function() { 
         $(this).removeClass('active') 
         }) 
         $(tabs[4]).addClass('active') 
         tabsContents = $('.tabbable .tab-content .tab-pane') 
         tabsContents.each(function() { 
         $(this).removeClass('active') 
         }) 
         $(tabsContents[4]).addClass('active') 
         $('#summary').trigger('change').trigger('shown'); 
         })</script>") 
     ) 
    ) 
    ) 
    )), 
    server = function(input, output) { 
    selectedData <- reactive({ 
    iris[, c(input$xcol, input$ycol)] 
    }) 
    clusters <- reactive({ 
    kmeans(selectedData(), input$clusters) 
    }) 
    output$plot1 <- renderPlot({ 
    plot(selectedData(), 
      col = clusters()$cluster, 
      pch = 20, cex = 3) 
    points(clusters()$centers, pch = 4, cex = 4, lwd = 4) 
    }) 
    output$table <- renderDataTable({ 
    selectedData() 
    }) 
} 
)) 

UPDATE : 완전히 "선택으로 돌아 가기를"http://www.wittgensteincentre.org/dataexplorer

Answer 1

의 첫 번째 두 개의 탭에 @jdharrison의 솔루션을 사용하여 버튼은 "데이터보기"를 구현하기 위해 관리

난 그냥 당신 생각 최종 JavaScript 로직을 단순화해야합니다. 모두 함께 퍼팅

 tabPanel(title = "Plot", plotOutput('plot1')), 
     tabPanel(title = "Data", dataTableOutput(outputId="table")), 
     tags$script("$('#linkToY').click(function() { 
        tabs = $('.tabbable .nav.nav-tabs li a'); 
        $(tabs[1]).click(); 
        })"), 
     tags$script("$('#linkToClusters').click(function() { 
        tabs = $('.tabbable .nav.nav-tabs li a'); 
        $(tabs[2]).click(); 
        })"), 
     tags$script("$('#linkToPlot').click(function() { 
        tabs = $('.tabbable .nav.nav-tabs li a'); 
        $(tabs[3]).click(); 
        })"), 
     tags$script("$('#linkToData').click(function() { 
        tabs = $('.tabbable .nav.nav-tabs li a'); 
        $(tabs[4]).click(); 
        })") 

:

library(shiny) 

runApp(list(
    ui = shinyUI(fluidPage(
    headerPanel('Iris k-means clustering'), 
    mainPanel(
     tabsetPanel(
     type = "tabs", 
     tabPanel(title = "Select X", 
       selectInput('xcol', 'X Variable', names(iris)), 
       HTML("<div id='linkToY'><FORM><INPUT Type='BUTTON' VALUE='Next'></FORM></div>")), 
     tabPanel(title = "Select Y", 
       selectInput('ycol', 'Y Variable', names(iris), selected=names(iris)[[2]]), 
       HTML("<div id='linkToClusters'><FORM><INPUT Type='BUTTON' VALUE='Next'></FORM></div>")), 
     tabPanel("Select Clusters", numericInput('clusters', 'Cluster count', 3, min = 1, max = 9), 
       HTML("<div id='linkToPlot'><FORM><INPUT Type='BUTTON' VALUE='View Plot'></FORM></div>"), 
       HTML("<div id='linkToData'><FORM><INPUT Type='BUTTON' VALUE='View Data'></FORM></div>")), 
     tabPanel(title = "Plot", plotOutput('plot1')), 
     tabPanel(title = "Data", dataTableOutput(outputId="table")), 
     tags$script("$('#linkToY').click(function() { 
        tabs = $('.tabbable .nav.nav-tabs li a'); 
        $(tabs[1]).click(); 
        })"), 
     tags$script("$('#linkToClusters').click(function() { 
        tabs = $('.tabbable .nav.nav-tabs li a'); 
        $(tabs[2]).click(); 
        })"), 
     tags$script("$('#linkToPlot').click(function() { 
        tabs = $('.tabbable .nav.nav-tabs li a'); 
        $(tabs[3]).click(); 
        })"), 
     tags$script("$('#linkToData').click(function() { 
        tabs = $('.tabbable .nav.nav-tabs li a'); 
        $(tabs[4]).click(); 
        })") 
    ) 
    ) 
    )), 
    server = function(input, output) { 
    selectedData <- reactive({ 
    iris[, c(input$xcol, input$ycol)] 
    }) 
    clusters <- reactive({ 
    kmeans(selectedData(), input$clusters) 
    }) 
    output$plot1 <- renderPlot({ 
    plot(selectedData(), 
      col = clusters()$cluster, 
      pch = 20, cex = 3) 
    points(clusters()$centers, pch = 4, cex = 4, lwd = 4) 
    }) 
    output$table <- renderDataTable({ 
    selectedData() 
    }) 
} 
))