问题

我有一段代码和一张地图，我想将它们并排显示，所以我使用了output-location: column。然而，地图显得非常小，与代码相比。有没有办法让它适应宽度和高度？

我尝试过通过减小边距来实现：par(mar = c(0, 0, 0, 0))，但没有任何变化。我还尝试过使用整数值来设置out-width和out-height（百分比在revealjs中不起作用），但这会破坏宽高比。

有什么想法？

格式：revealjs

一个标题

#| 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()

注：这似乎是sf对象的常见问题：https://stackoverflow.com/questions/67687029/eliminate-outer-margin-ggplot2-geom-sf。

---
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()
```

答案1

得分: 2

Option 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
)

.reveal .map img {
  height: 80vh;
  padding-left: 2em;
}

Option 02

您可以使用 knitr 钩子 [`knitr::hook_pdfcrop`](https://bookdown.org/yihui/rmarkdown-cookbook/crop-plot.html) 一次完成选项 01 的所有步骤。

首先通过在 `knit_hooks$set()` 中设置它来启用它，然后在代码块中使用 `crop: true`。

```{r}
---
title: "Fit plot to space column layout"
format: revealjs
---

## A title

```{r setup, include=FALSE}
knitr::knit_hooks$set(crop = knitr::hook_pdfcrop)

#| 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()

.reveal .map img {
  height: 80vh;
  width: auto !important;
  padding-left: 2em;
}

[![figure for the second option][2]][2]

[1]: https://i.stack.imgur.com/0BgEN.png
[2]: https://i.stack.imgur.com/ONipw.png

<details>
<summary>英文:</summary>

## Option 01

One option could be saving the map and then using `knitr::plot_crop` to get an image of the map where extra white margins will be cropped off and then render the image with `magick::read_image`.

I have also used a bit CSS to tune the map height a little bit and get a nice output.

~~~
---
title: &quot;Fit plot to space column layout&quot;
format: revealjs
---

## A title

```{r}
#| output-location: column
#| echo: true
#| classes: map
library(spData)
library(sf)
library(ggplot2)
library(magick)

map &lt;- ggplot() +
  geom_sf(data = nz) + 
  coord_sf(expand = F) +
  theme_minimal()

ggsave(&quot;map.png&quot;)
. &lt;- knitr::plot_crop(&quot;map.png&quot;)
print(
  image_read(&quot;map.png&quot;), 
  info = FALSE
)

.reveal .map img {
  height: 80vh;
  padding-left: 2em;
}

<hr>

[![map with removed border][1]][1]


## Option 02

You can use the knitr hooks [`knitr::hook_pdfcrop`](https://bookdown.org/yihui/rmarkdown-cookbook/crop-plot.html) to do all of the steps of option 01 in one go.

At first enable it by setting it in `knit_hooks$set()` and then use `crop: true` in the code chunk.

title: "Fit plot to space column layout"
format: revealjs

A title

knitr::knit_hooks$set(crop = knitr::hook_pdfcrop)

#| 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()

.reveal .map img {
  height: 80vh;
  width: auto !important;
  padding-left: 2em;
}

<hr>


[![figure for the second option][2]][2]


  [1]: https://i.stack.imgur.com/0BgEN.png
  [2]: https://i.stack.imgur.com/ONipw.png

</details>



# 答案2
**得分**: 2

你可以使用 `fig-asp` 选项如下所示：

```markdown
---
format: 
 revealjs
---

## 标题

```{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][1]][1]
```

[1]: https://i.stack.imgur.com/XyQai.png

<details>
<summary>英文:</summary>

Maybe you could use the `fig-asp` option like this:

    ---
    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()
    ```

Output:

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/XyQai.png

</details>



# 答案3
**得分**: 1

你可以使用 `max-width`，但我希望有更好的方法：

```
---
format: revealjs
---

<style>
.reveal img {
  max-width: 150%;
  overflow-x: hidden;
}
</style>

## 一个标题

```{r}
#| output-location: column
#| echo: true

library(spData)
library(sf)
library(ggplot2)

ggplot() +
  geom_sf(data = nz) + 
  theme_minimal()
```

[![enter image description here][1]][1]
```

[![在这里输入图片描述][1]][1]

<details>
<summary>英文:</summary>

You could use `max-width`, but I hope that there are better ways:

    ---
    format: revealjs
    ---
    
    &lt;style&gt;
    .reveal img {
      max-width: 150%;
      overflow-x: hidden;
    }
    &lt;/style&gt;
    
    ## 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][1]][1]


  [1]: https://i.stack.imgur.com/CfPqL.png

</details>