Question

我正在尝试在r markdown中生成可折叠的菜单。我用5个手风琴制作了一个可复制的示例。在这些手风琴中，我想显示一个由SharedData对象链接的绘图和数据表。当markdown编织文档时，数据表对象不可见。

带有菜单的示例来自：https://www.w3schools.com/howto/howto_js_accordion.asp

是否可以绘制数据表输出？问题出在这行代码中：

    htmltools::tagList(list(table))," \n",

.Rmd

---
title: "Collapsibles/Accordion Menu"
output: 
  html_document:
    css: stylesheet.css
editor_options: 
  chunk_output_type: console
---

```{r setup, include=FALSE, Options + Packages}
knitr::opts_chunk$set(echo = FALSE,
                  message = FALSE,
                  warning = FALSE,
                  error = TRUE,
                  fig.align = "center")
library(purrr)
library(tidyverse)
library(plotly)
library(pander)
library(crosstalk)
library(DT)
```

```{r, results='asis', Output}
print_accordion <- function(X) {
  df_plot <- tibble(x = rnorm(10000),
                    y = rnorm(10000),
                    cat = rep(1:10, length.out = 10000))

  sd_p <- SharedData$new(df_plot, 
                         ~cat, 
                         group = paste0("Group ", X))

  plot <- sd_p %>% 
    plot_ly() %>% 
    add_markers(x = ~x,
                y = ~y,
                color = ~cat) %>% 
    toWebGL()

  df_table <- df_plot %>% 
    group_by(cat) %>% 
    summarise(Mean = mean(x)) %>% 
    ungroup()

  sd_t <- SharedData$new(df_table, 
                         ~cat, 
                         group = paste0("Group ", X)) 


  table <- DT::datatable(sd_t) 

  cat(paste0("<button class='accordion'>Section ", X,"</button>\n",
             "<div class='panel'>\n",
             "<p>This is the text to Panel ", X,"</p>\n",
             htmltools::tagList(list(plot))," \n",
             htmltools::tagList(list(table))," \n",
             "</div>\n"
            )
      )
}

test <- tibble(x = 1:5) 

walk(test$x, print_accordion)

plotly_empty(height = "50px")
```

```{js, JavaScript part}
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
```

stylesheet.css

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
   background-color: #bebebe;
   color: #444;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   text-align: left;
   border: none;
   outline: none;
   transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the 
.active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
   background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

具有SharedData的R降价模式中的可折叠/手风琴菜单（绘图和DT）

0 个答案: