【问题标题】:Rmarkdown: Placing static content under a tabbed sectionRmarkdown:将静态内容放在选项卡式部分下
【发布时间】:2017-05-02 14:19:58
【问题描述】:

我希望帮助我将静态内容放置在我的 R 降价文件中的选项卡部分下。类似于这个问题:RMarkdown: Tabbed and Untabbed headings,但解决方案不考虑目录中的空行。

是否可以在不开始新部分的情况下结束选项卡式部分?这是一个例子:

---
title: "Mtcars Example"
output: 
  html_document:
    toc: true
    toc_float: true
    number_sections: true
---

# Mtcars Info
The data was extracted from the 1974 Motor Trend US magazine..

# Dataset Prep
No changes were made to the dataset..

# Plots {.tabset .tabset-pills}
```{r results = 'hide', message = FALSE, fig.height = 5, fig.width = 5, echo = FALSE}
    plot1 <- ggplot(data = mtcars) + 
            geom_point(aes(x = mpg, y = hp))
    plot2 <- ggplot(data = mtcars) + 
            geom_point(aes(x = mpg, y = wt))
```  

## mpg vs hp  
```{r, echo = FALSE}
plot1
```  

## mpg vs wt  
```{r, echo = FALSE}
plot2
```  

#
The plots above show how mpg is related.. 

# Analysis
the mtcars dataset is a great exploratory dataset to show..

第 3 部分是一个选项卡式部分,允许用户在图之间切换。我想在它下面有静态文本。

问题是,如果不开始新标题,则内容仅在选择第二个选项卡时可见。不好。我可以通过开始一个新标题并将内容放在那里来解决这个问题。但现在我的目录中有一个编号为第 4 节的空白。也不可取。

有没有办法解决这个问题?在 Rmarkdown 备忘单https://www.rstudio.com/wp-content/uploads/2016/03/rmarkdown-cheatsheet-2.0.pdf 中,您应该可以用### 结束一个选项卡式部分,但这似乎也不起作用。

【问题讨论】:

    标签: html r tabs knitr r-markdown


    【解决方案1】:

    我不确定是否有任何内置解决方案。在这种情况下,我通常只使用 jQuery。在这种情况下,它是单行的。

    可重现的例子:

    ---
    title: "Mtcars Example"
    output: 
      html_document:
        number_sections: true
    ---
    
    <script>
    $(document).ready(function() {
      $('#myDiv').appendTo('#first-tab-sec');
    });
    </script>
    
    <div id="myDiv">a
    The quick brown fox jumps over the lazy dog.
    </div>
    
    # Plots {.tabset .tabset-pills #first-tab-sec}
    
    ## mpg vs hp  
    ```{r, echo = FALSE}
    plot(mtcars$mpg, mtcars$hp)
    ```  
    
    ## mpg vs wt  
    ```{r, echo = FALSE}
    plot(mtcars$mpg, mtcars$wt)
    ```  
    
    # Next Section
    

    我们创建了一个 ID 为 myDiv 的 div 元素。在该元素内部,我们存储内容,应该位于选项卡区域下方。

    jQuery (JS) sn-p 执行以下操作:

    一旦文档完成加载 ($(document).ready()),我们就会执行匿名 function(){...}。在该函数中,我们通过 id 获取 div 元素并将其附加到 id 为 first-tab-sec 的元素。

    多个选项卡式部分

    如果我们有另一个选项卡部分,我们只需给它一个新的 id,例如second-tab-sec,并添加代码

    $('#mySecDiv').appendTo('#second-tab-sec');
    

    到 JS 块。这里我们假设内容包含在 id 为 mySecDiv 的 div 中。

    【讨论】:

    • 这看起来很棒!我试过了,它做了我想要的。不过快速提问..如果您有第二个包含不同内容的选项卡部分会发生什么?我尝试添加另一个 jQuery sn-p,但它会复制每个选项卡部分下的文本。
    • 编辑了我的答案。我们可以通过给它一个唯一的 id 来识别我们的选项卡部分。
    • 终于有机会试一试了。完美运行!
    猜你喜欢
    • 2016-10-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-04
    • 1970-01-01
    • 1970-01-01
    • 2017-07-26
    • 2021-05-19
    相关资源
    最近更新 更多