Отображение информации из кадра данных после нажатия на изображение - PullRequest
0 голосов
/ 20 марта 2020

Я пытаюсь создать Опасность! приложение, использующее Shiny. Я использую код здесь в качестве отправной точки для построения интерактивной сетки вопросов. https://community.rstudio.com/t/create-a-grid-of-clickable-images-each-with-a-different-link-and-its-own-caption/36794/2

library(shiny)

ui <- fluidPage(

  #It's better to have the CSS in a separate file is it's long
  tags$head(
    tags$style(HTML("
            * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: Arial;
      }

      .header {
        text-align: center;
        padding: 32px;
      }

      .row {
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
        padding: 0 4px;
      }

      /* Create four equal columns that sits next to each other */
      .column {
        -ms-flex: 25%; /* IE10 */
        flex: 25%;
        max-width: 25%;
        padding: 0 4px;
      }

      .column img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
      }

      /* Responsive layout - makes a two column-layout instead of four columns */
      @media screen and (max-width: 800px) {
        .column {
          -ms-flex: 50%;
          flex: 50%;
          max-width: 50%;
        }
      }

      /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 600px) {
        .column {
          -ms-flex: 100%;
          flex: 100%;
          max-width: 100%;
        }
      }

    "))
  ),

  titlePanel("Adaptive image grid with captions and links"),
  uiOutput("myGrid") #this will hold the grid
)

server <- function(input, output, session) {

  #Create a fake dataset (replace with your own)
  imgData = data.frame(path = paste0("https://picsum.photos/id/", sample(1:200, 14), "/200/"),
                       caption = c(paste("This is the caption for image", 1:14)),
                       link = rep("https://community.rstudio.com", 14))

  #Calculate the number of images per column (4 in total)
  nImages = nrow(imgData)
  perCol = rep(floor(nImages/4), 4) 
  if(nImages %% 4 > 0){
    perCol[1:(nImages %% 4)] = perCol[1:(nImages %% 4)] + 1
  }
  perCol = cumsum(c(1, perCol))

  #Create the HTML for the image grid
  imageGrid = paste(
    "<div class='row'>", 
    paste(purrr::map(1:4, function(i){
      paste("<div class='column'>", 
            paste0("<a href='", imgData[perCol[i]:(perCol[i+1]-1), "link"], "' target='_blank'><img src='", 
                   imgData[perCol[i]:(perCol[i+1]-1), "path"],"' style='width:100%'></a><p>",
                   imgData[perCol[i]:(perCol[i+1]-1), "caption"],"</p>", collapse = ""), 
            "</div>", collapse = "")
    }), collapse = ""),
    "</div>")

  #Paste the image grid HTML into Shiny
  output$myGrid = renderUI({
    HTML(imageGrid)
  })
}

shinyApp(ui, server)

Мой вопрос, вместо прямого перехода по ссылке после нажатия на изображение, как я могу ссылаться на часть кадра данных, чтобы отобразить подсказку (например, всплывающее окно) ? Я предполагаю, что я должен сделать изображения реактивными, как-то. (Вы можете использовать mtcars как фиктивный фрейм данных или любой текст.) Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...