带JavaScript的闪亮-无法获取首字母"；“过滤值”；设置为"；“全部”；

我对HTML、CSS和JavaScript相当陌生。我从网上得到了（“复制粘贴”）代码，希望创建一个闪亮的应用程序，在一个单独的面板中显示数据框中每个变量的“分布”。基于“类”，我想过滤变量，这样只显示所选的“类型”。代码或多或少都能工作，但当我运行代码时，只会显示一个空屏幕——尽管所有面板都会显示出来。当我点击其中一个按钮时，它会做它应该做的事情（从图中显示出来——只有在增加/减少浏览器大小后，它们才会填充面板）。我不知道如何将初始状态设置为“全选”。我的“智慧”已经到了尽头。非常感谢您的帮助，因为这将是一个非常酷的应用程序

提前感谢您的帮助，并对冗长的代码表示抱歉

最佳亚历克斯

library(shiny)
library(shinyjs)
library(ggplot2)
library(purrr)
library(plotly)
library(nycflights13)
library(dplyr)
library(shinycssloaders)
library(forcats)
library(readr)

data("iris")
my_df <- iris


#function for data transformation
list_cut <- function(x, y) {
    if (y == "numeric") {
        uq = length(unique(x))
        br_eaks = ifelse(uq > 8, 8, ifelse(uq == 1, 2, uq))
        data.frame(Wert = cut(x, breaks = br_eaks)) %>%
            group_by(Wert) %>%
            count()
        
    } else if (y == "factor") {
        data.frame(Wert = x) %>%
            mutate(Wert = fct_lump(Wert, n = 9)) %>%
            count(Wert) %>%
            mutate(Wert = fct_reorder(Wert, n))
        
    } else {
        NA
    }
}

#create "transformed" data.frame
my_data <- tibble(var_name = colnames(my_df),
                  var_class = case_when(
                      lapply(my_df, is.numeric) == TRUE ~ "numeric",
                      lapply(my_df, is.factor) == TRUE ~ "factor"
                  ),
                  data = as.list(my_df))


#add plots to data.frame
plot_data <- my_data %>%
    
    transmute(var_name = var_name,
              var_class = var_class,
              p_data = map2(data, var_class, list_cut),
              
              plot_bars = map2(p_data, var_class, function(x, y) {
                  if (y == "numeric") {
                      
                      plot_ly(x = ~x$Wert, y = ~x$n) %>%
                          add_bars(hoverinfo = "text", text = ~paste0("Range: ", x$Wert,
                                                                      "<br>Anzahl: ", x$n)) %>%
                          layout(
                              xaxis = list(
                                  title = "",
                                  tickangle = 45,
                                  zeroline = FALSE
                              ),
                              yaxis = list(
                                  title = "",
                                  zeroline = FALSE
                              )
                          )
                      
                  } else if (y == "factor") {
                      
                      plot_ly(y = ~x$Wert, x = ~x$n, color = I("orange")) %>%
                          add_bars(hoverinfo = "text", text = ~paste0("Label: ", x$Wert,
                                                                      "<br>Anzahl: ", x$n)) %>%
                          layout(
                              xaxis = list(
                                  title = "",
                                  zeroline = FALSE
                              ),
                              yaxis = list(
                                  title = "",
                                  zeroline = FALSE
                              )
                          )
                    
                  } else {
                      plotly_empty()
                  }
                  
              }))

ui <- fluidPage(
    
    #CSS
    tags$style(HTML(
        ".filterDiv {
            display: none;
        }
        
        .show {
            display: block;
        }
        
        .container {
            margin-top: 20px;
            overflow: hidden;
        }
        
        .panel.panel-default {
            float: left;
            margin: 0.5%;
            width: 15%;
        }"
    )),
    
    #Java Script
    tags$script(
        HTML('filterSelection("all")
        function filterSelection(c) {
        var x, i;
        x = document.getElementsByClassName("filterDiv");
        if (c == "all") c = "";
        for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
        }
        }
        
        function w3AddClass(element, name) {
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
        }
        }
        
        function w3RemoveClass(element, name) {var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
        arr1.splice(arr1.indexOf(arr2[i]), 1);
        }
        }
        element.className = arr1.join(" ");
        }')
    ),
    
    
    
    #Buttons
    tags$div(
        id = "myBtnContainer",
        tags$button(class="btn active", onclick="filterSelection('all')", "Show All"),
        tags$button(class="btn", onclick="filterSelection('numeric')", "Show Numeric"),
        tags$button(class="btn", onclick="filterSelection('factor')", "Show Factor")
    ),
    
    uiOutput("moreControls")
)


#server function
server <- function(input, output) {
    
    output$moreControls <- renderUI({
        
        pmap(list(plot_data$plot_bars, plot_data$var_name, plot_data$var_class), function(x_plots, y_var_name, z_var_class) {
            
            tags$div(
                class = paste0("panel panel-default filterDiv ", case_when(
                    z_var_class == "numeric" ~ "numeric",
                    z_var_class == "factor" ~ "factor"
                )),
                tags$div(
                    class = "panel-heading",
                    id = z_var_class,
                    y_var_name,
                ),
                
                tags$div(
                    class = "panel-body",
                    
                    x_plots
                    
                )
            )
        }
        )
    })
}

shinyApp(ui, server)

库（闪亮）
图书馆（shinyjs）
图书馆（GG2）
图书馆（purrr）
图书馆（绘本）
图书馆（nycflights13）
图书馆（dplyr）
图书馆（shinycssloaders）
图书馆（供猫用）
图书馆（readr）
数据（“iris”）
我的_df%
分组依据（Wert）%>%
计数（）
}如果（y==“系数”）{
数据帧（Wert=x）%>%
突变（Wert=fct_肿块（Wert，n=9））%>%
计数（Wert）%>%
变异（Wert=fct_重新排序（Wert，n））
}否则{
NA
}
}
#创建“已转换”的data.frame
我的_数据%
添加_条（hoverinfo=“text”，text=~paste0（“范围：”，x$Wert，
“
Anzahl:”，x$n））%>%
布局(
xaxis=列表(
title=“”，
角度=45，
零线=假
),
yaxis=列表(
title=“”，
零线=假
)
)
}如果（y==“系数”）{
绘图（y=~x$Wert，x=~x$n，颜色=I（“橙色”））%>%
添加工具栏（hoverinfo=“text”，text=~paste0（“标签：”，x$Wert，
“
Anzahl:”，x$n））%>%
布局(
xaxis=列表(
title=“”，
零线=假
),
yaxis=列表(
title=“”，
零线=假
)
)
}否则{
plotly_empty（）
}
}))
ui我没有尝试你的代码，因为它太大了。也许这是可行的：

'
function filterSelection(c) {
  ......
}

function w3AddClass(element, name) {
  ......
}

function w3RemoveClass(element, name) {
  ......
}

$(document).on("shiny:connected", function(){
  setTimeout(function(){filterSelection("all");}, 0);
});
'

如果不起作用，请尝试将最后一条语句替换为

$(document).on("shiny:value", function(e){
  if(e.name === "moreControls"){
    setTimeout(function(){filterSelection("all");}, 0);
  }
});

“…很抱歉代码太长了。”-那么这不是一个简单的代码，它看起来像是R代码而不是Javascript，因此它不会在浏览器中运行。。。。你能检查一下，或者提供更多的细节吗？嗨，斯蒂芬，最后一个似乎有效；谢谢你的帮助-非常感谢！