代码之家  ›  专栏  ›  技术社区  ›  Maël

将绘图与Quarto revealjs中的可用列布局相匹配

  •  0
  • Maël  · 技术社区  · 1 年前

    我有一个代码和一张地图,我想在旁边绘制,所以我使用 output-location: column 。然而,与代码相比,地图显得非常小。有什么办法使它适合宽度和高度吗?

    我尝试过减少利润: par(mar = c(0, 0, 0, 0)) ,但它不会改变任何事情。我也试过 out-width out-height 使用整数(百分比不适用 revealjs ),但这会破坏纵横比。

    有什么想法吗?

    ---
    format: revealjs
    ---
    
    ## A title
    
    ```{r}
    #| output-location: column
    #| echo: true
    library(spData)
    library(sf)
    library(ggplot2)
    
    #par(mar = c(0, 0, 0, 0))
    ggplot() +
      geom_sf(data = nz) + 
      theme_minimal()
    ```
    

    enter image description here

    注意:这似乎是的常见问题 sf 物体: Eliminate Outer Margin (Ggplot2 / geom_sf) .

    0 回复  |  直到 1 年前
        1
  •  2
  •   Shafee ikashnitsky    1 年前

    选项01

    一种选择是保存地图,然后使用 knitr::plot_crop 以获取将裁剪掉多余空白的地图图像,然后使用渲染图像 magick::read_image .

    我还使用了一点CSS来稍微调整地图高度,并获得良好的输出。

    ---
    title: "Fit plot to space column layout"
    format: revealjs
    ---
    
    ## A title
    
    ```{r}
    #| output-location: column
    #| echo: true
    #| classes: map
    library(spData)
    library(sf)
    library(ggplot2)
    library(magick)
    
    map <- ggplot() +
      geom_sf(data = nz) + 
      coord_sf(expand = F) +
      theme_minimal()
    
    ggsave("map.png")
    . <- knitr::plot_crop("map.png")
    print(
      image_read("map.png"), 
      info = FALSE
    )
    ```
    
    ```{css, echo=FALSE}
    .reveal .map img {
      height: 80vh;
      padding-left: 2em;
    }
    ```
    

    map with removed border

    选项02

    你可以用编织钩 knitr::hook_pdfcrop 一次性完成选项01的所有步骤。

    首先通过将其设置为启用 knit_hooks$set() 然后使用 crop: true 在代码块中。

    ---
    title: "Fit plot to space column layout"
    format: revealjs
    ---
    
    ## A title
    
    ```{r setup, include=FALSE}
    knitr::knit_hooks$set(crop = knitr::hook_pdfcrop)
    ```
    
    
    ```{r}
    #| output-location: column
    #| echo: true
    #| crop: true
    #| classes: map
    library(spData)
    library(sf)
    library(ggplot2)
    
    
    ggplot() +
      geom_sf(data = nz) + 
      coord_sf(expand = F) +
      theme_minimal()
    
    ```
    
    
    ```{css, echo=FALSE}
    .reveal .map img {
      height: 80vh;
      width: auto !important;
      padding-left: 2em;
    }
    ```
    

    figure for the second option

        2
  •  2
  •   Quinten    1 年前

    也许你可以用 fig-asp 选项如下:

    ---
    format: 
     revealjs
    ---
    
    ## A title
    
    ```{r}
    #| output-location: column
    #| echo: true
    #| fig-asp: 1
    library(spData)
    library(sf)
    library(ggplot2)
    
    #par(mar = c(0, 0, 0, 0))
    ggplot() +
      geom_sf(data = nz) + 
      theme_minimal()
    ```
    

    输出

    enter image description here

        3
  •  1
  •   Julian    1 年前

    你可以使用 max-width ,但我希望有更好的方法:

    ---
    format: revealjs
    ---
    
    <style>
    .reveal img {
      max-width: 150%;
      overflow-x: hidden;
    }
    </style>
    
    ## A title
    
    ```{r}
    #| output-location: column
    #| echo: true
    
    library(spData)
    library(sf)
    library(ggplot2)
    
    ggplot() +
      geom_sf(data = nz) + 
      theme_minimal()
    ```
    

    enter image description here