适应 Quarto revealjs 中的空间列布局的图表。

huangapple
go评论98阅读模式
英文:

Fit plot to space column layout in Quarto revealjs

问题

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

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

有什么想法？

格式：revealjs

一个标题

  1. #| output-location: column
  2. #| echo: true
  3. library(spData)
  4. library(sf)
  5. library(ggplot2)
  7. #par(mar = c(0, 0, 0, 0))
  8. ggplot() +
  9.   geom_sf(data = nz) + 
  10.   theme_minimal()

适应 Quarto revealjs 中的空间列布局的图表。

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

英文:

I have a code and a map that I would like to plot on the side, so I use output-location: column. The map however, appears very small compared to the code. Is there any way to make it fit the width and height?

I've tried by reducing the margins: par(mar = c(0, 0, 0, 0)), but it does not change anything. I've also tried out-width and out-height with integers (percentages do not work in revealjs), but this destroys the aspect ratio.

Any ideas?

  1. ---
  2. format: revealjs
  3. ---
  5. ## A title
  7. ```{r}
  8. #| output-location: column
  9. #| echo: true
  10. library(spData)
  11. library(sf)
  12. library(ggplot2)
  14. #par(mar = c(0, 0, 0, 0))
  15. ggplot() +
  16.   geom_sf(data = nz) + 
  17.   theme_minimal()
  18. ```

适应 Quarto revealjs 中的空间列布局的图表。

Note: this seems to be a common problem with sf objects: https://stackoverflow.com/questions/67687029/eliminate-outer-margin-ggplot2-geom-sf.

答案1

得分: 2

Option 01

一种选择可能是保存地图，然后使用 knitr::plot_crop 来获取地图的图像，其中额外的白色边距将被裁剪掉，然后使用 magick::read_image 渲染图像。

我还使用了一些 CSS 来微调地图的高度，以获得漂亮的输出。

  1. ---
  2. title: "Fit plot to space column layout"
  3. format: revealjs
  4. ---
  6. ## A title
  8. ```{r}
  9. #| output-location: column
  10. #| echo: true
  11. #| classes: map
  12. library(spData)
  13. library(sf)
  14. library(ggplot2)
  15. library(magick)
  17. map <- ggplot() +
  18.   geom_sf(data = nz) + 
  19.   coord_sf(expand = F) +
  20.   theme_minimal()
  22. ggsave("map.png")
  23. . <- knitr::plot_crop("map.png")
  24. print(
  25.   image_read("map.png"), 
  26.   info = FALSE
  27. )
  1. .reveal .map img {
  2.   height: 80vh;
  3.   padding-left: 2em;
  4. }

适应 Quarto revealjs 中的空间列布局的图表。

  2. Option 02
  4. 您可以使用 knitr 钩子 [`knitr::hook_pdfcrop`](https://bookdown.org/yihui/rmarkdown-cookbook/crop-plot.html) 一次完成选项 01 的所有步骤。
  6. 首先通过在 `knit_hooks$set()` 中设置它来启用它，然后在代码块中使用 `crop: true`。
  8. ```{r}
  9. ---
  10. title: "Fit plot to space column layout"
  11. format: revealjs
  12. ---
  14. ## A title
  16. ```{r setup, include=FALSE}
  17. knitr::knit_hooks$set(crop = knitr::hook_pdfcrop)
  1. #| output-location: column
  2. #| echo: true
  3. #| crop: true
  4. #| classes: map
  5. library(spData)
  6. library(sf)
  7. library(ggplot2)
  10. ggplot() +
  11.   geom_sf(data = nz) + 
  12.   coord_sf(expand = F) +
  13.   theme_minimal()
  1. .reveal .map img {
  2.   height: 80vh;
  3.   width: auto !important;
  4.   padding-left: 2em;
  5. }

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

  2. [1]: https://i.stack.imgur.com/0BgEN.png
  3. [2]: https://i.stack.imgur.com/ONipw.png
  5. <details>
  6. <summary>英文:</summary>
  8. ## Option 01
  10. 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`.
  12. I have also used a bit CSS to tune the map height a little bit and get a nice output.
  14. ~~~
  15. ---
  16. title: &quot;Fit plot to space column layout&quot;
  17. format: revealjs
  18. ---
  20. ## A title
  22. ```{r}
  23. #| output-location: column
  24. #| echo: true
  25. #| classes: map
  26. library(spData)
  27. library(sf)
  28. library(ggplot2)
  29. library(magick)
  31. map &lt;- ggplot() +
  32.   geom_sf(data = nz) + 
  33.   coord_sf(expand = F) +
  34.   theme_minimal()
  36. ggsave(&quot;map.png&quot;)
  37. . &lt;- knitr::plot_crop(&quot;map.png&quot;)
  38. print(
  39.   image_read(&quot;map.png&quot;), 
  40.   info = FALSE
  41. )
  1. .reveal .map img {
  2.   height: 80vh;
  3.   padding-left: 2em;
  4. }
  2. &lt;hr&gt;
  4. [![map with removed border][1]][1]
  7. ## Option 02
  9. 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.
  11. 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

  1. knitr::knit_hooks$set(crop = knitr::hook_pdfcrop)
  1. #| output-location: column
  2. #| echo: true
  3. #| crop: true
  4. #| classes: map
  5. library(spData)
  6. library(sf)
  7. library(ggplot2)
  10. ggplot() +
  11.   geom_sf(data = nz) + 
  12.   coord_sf(expand = F) +
  13.   theme_minimal()
  1. .reveal .map img {
  2.   height: 80vh;
  3.   width: auto !important;
  4.   padding-left: 2em;
  5. }
  2. &lt;hr&gt;
  5. [![figure for the second option][2]][2]
  8.   [1]: https://i.stack.imgur.com/0BgEN.png
  9.   [2]: https://i.stack.imgur.com/ONipw.png
  11. </details>
  15. # 答案2
  16. **得分**: 2
  18. 你可以使用 `fig-asp` 选项如下所示：
  20. ```markdown
  21. ---
  22. format: 
  23.  revealjs
  24. ---
  26. ## 标题
  28. ```{r}
  29. #| output-location: column
  30. #| echo: true
  31. #| fig-asp: 1
  32. library(spData)
  33. library(sf)
  34. library(ggplot2)
  36. #par(mar = c(0, 0, 0, 0))
  37. ggplot() +
  38.   geom_sf(data = nz) + 
  39.   theme_minimal()
  40. ```
  42. 输出:
  44. [![enter image description here][1]][1]
  45. ```
  47. [1]: https://i.stack.imgur.com/XyQai.png
  49. <details>
  50. <summary>英文:</summary>
  52. Maybe you could use the `fig-asp` option like this:
  54.     ---
  55.     format: 
  56.      revealjs
  57.     ---
  58.     
  59.     ## A title
  60.     
  61.     ```{r}
  62.     #| output-location: column
  63.     #| echo: true
  64.     #| fig-asp: 1
  65.     library(spData)
  66.     library(sf)
  67.     library(ggplot2)
  68.     
  69.     #par(mar = c(0, 0, 0, 0))
  70.     ggplot() +
  71.       geom_sf(data = nz) + 
  72.       theme_minimal()
  73.     ```
  75. Output:
  77. [![enter image description here][1]][1]
  80.   [1]: https://i.stack.imgur.com/XyQai.png
  82. </details>
  86. # 答案3
  87. **得分**: 1
  89. 你可以使用 `max-width`，但我希望有更好的方法：
  91. ```
  92. ---
  93. format: revealjs
  94. ---
  96. <style>
  97. .reveal img {
  98.   max-width: 150%;
  99.   overflow-x: hidden;
  100. }
  101. </style>
  103. ## 一个标题
  105. ```{r}
  106. #| output-location: column
  107. #| echo: true
  109. library(spData)
  110. library(sf)
  111. library(ggplot2)
  113. ggplot() +
  114.   geom_sf(data = nz) + 
  115.   theme_minimal()
  116. ```
  118. [![enter image description here][1]][1]
  119. ```
  121. [![在这里输入图片描述][1]][1]
  123. <details>
  124. <summary>英文:</summary>
  126. You could use `max-width`, but I hope that there are better ways:
  128.     ---
  129.     format: revealjs
  130.     ---
  131.     
  132.     &lt;style&gt;
  133.     .reveal img {
  134.       max-width: 150%;
  135.       overflow-x: hidden;
  136.     }
  137.     &lt;/style&gt;
  138.     
  139.     ## A title
  140.     
  141.     ```{r}
  142.     #| output-location: column
  143.     #| echo: true
  144.     
  145.     library(spData)
  146.     library(sf)
  147.     library(ggplot2)
  148.     
  149.     ggplot() +
  150.       geom_sf(data = nz) + 
  151.       theme_minimal()
  152.     ```
  154. [![enter image description here][1]][1]
  157.   [1]: https://i.stack.imgur.com/CfPqL.png
  159. </details>

huangapple
  • 本文由 发表于 2023年6月6日 00:20:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/76408297.html
  • css
  • quarto
  • r
  • r-sf
  • reveal.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定