【发布时间】：2018-02-15 16:31:43
【问题描述】：
新的闪亮。我正在为一些实验数据创建一个数据探索应用程序。
我首先选择一个变量作为子集，然后使用滑块为所述变量选择一个范围（如图所示）。子集数据以红色覆盖在原始图上。
我希望sliderInput 与selectInput 在同一级别对齐。最好的方法是什么？我还想为这些变量添加一个复选框或单选按钮，如果选择这些变量将添加一个辅助图（或辅助轴 - 我知道，不推荐，但这是所需要的）。我还没有实现，但把它放在这里，因为这需要相同的对齐。
代码
为简洁起见，sliderInput 和 selectInput 的参数已被删除。 zdat() 是一个反应式data.table。
用户界面
fluidRow(
column(4,
uiOutput("subsetZoomPlot_x"), # Select x-axis for SortZoomPlot
uiOutput("subsetZoomPlot_y"), # Select y-axis for SortZoomPlot
uiOutput("subsetZoomPlot_var1"), # Subset data by var1
uiOutput("subsetZoomPlot_var2"), # Subset data by var2
uiOutput("subsetZoomPlot_var3") # Subset zoomplot data by var3
),
column(4,
uiOutput("subsetZoomPlot_var1_slider"), # range for subsetZoomPlot_var1 (slider input)
uiOutput("subsetZoomPlot_var2_slider"), # range for subsetZoomPlot_var1 (slider input)
uiOutput("subsetZoomPlot_var3_slider") # range for subsetZoomPlot_var1 (slider input)
)
),
fluidRow(
plotOutput("subsetZoomPlot")
)
服务器
output$subsetZoomPlot_x <- renderUI({
selectInput(inputId = "subsetZoomPlot_x", ...)
})
output$subsetZoomPlot_y <- renderUI({
selectInput(inputId = "subsetZoomPlot_y", ...)
})
output$subsetZoomPlot_var1 <- renderUI({
selectInput(inputId = "subsetZoomPlot_var1", ...)
})
output$subsetZoomPlot_var2 <- renderUI({
selectInput(inputId = "subsetZoomPlot_var2", ...)
})
output$subsetZoomPlot_var3 <- renderUI({
selectInput(inputId = "subsetZoomPlot_var3", ...)
})
output$subsetZoomPlot_var1_slider <- renderUI({
vmin <- floor(min(zdat()[, get(input$subsetZoomPlot_var1)]))
vmax <- ceiling(max(zdat()[, get(input$subsetZoomPlot_var1)]))
sliderInput(...)
})
output$subsetZoomPlot_var2_slider <- renderUI({
vmin <- floor(min(zdat()[, get(input$subsetZoomPlot_var2)]))
vmax <- ceiling(max(zdat()[, get(input$subsetZoomPlot_var2)]))
sliderInput(...)
})
output$subsetZoomPlot_var3_slider <- renderUI({
vmin <- floor(min(zdat()[, get(input$subsetZoomPlot_var3)]))
vmax <- ceiling(max(zdat()[, get(input$subsetZoomPlot_var3)]))
sliderInput(...)
})
编辑：
我为 UI 部分添加了我当前的代码。它已经有 fluidrow(column(), column()) 用于布局。我的问题是我希望var1 的滑块（屏幕截图中的rh）与选择rh 的下拉菜单（selectInput）对齐在同一级别，并且对于其他两个变量也是如此。这意味着第二列需要垂直移位。对selectInput 和sliderInput 的每个组合使用多个fluidrow 语句是唯一的方法吗？
【问题讨论】：
-
元素对齐是 UI 的问题，所以你最好共享你的 UI 而不是你的服务器。无论如何，您应该read this guide，尤其是fluid grid system 上的部分。
-
感谢您的建议，但这个问题更多的是水平对齐。我正在尝试找到一种方法来获得正确的垂直对齐，而无需为每一行输入变量和滑块创建一个新行。也就是说，如果有可能有垂直填充/偏移。