如何在幻灯片revealjs Quarto中放大图表？

Question

当我点击这张幻灯片时，我想zoom在图表上显示。我应该像动画一样。这是一些可重现的代码：

---
title: "Zoom on graph in slide"
format: revealjs
---

## Start

- I would like to zoom to the graph clicking on this slide

```{r}
#| echo: false
library(ggplot2)
ggplot(mtcars, aes(x = cyl, y = mpg)) +
  geom_point()
```

输出：

我希望图表变成动画，以便它缩放到图表。我zoom在上面的链接中找到了该选项，但我不确定如何将其用作动画。所以我想知道是否有人知道如何在revealjs Quarto中制作缩放动画？

Answer 1

您可能有兴趣探索另一种方法：

---
title: "Zoom on graph in slide"
format: revealjs
---

## Start

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js""></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
    // onClick function for all plots (img's)
    $('img:not(.zoomImg)').click(function() {
      $('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
      $('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
    });
    // onClick function for zoomImg
    $('img.zoomImg').click(function() {
      $('.zoomDiv').css({opacity: '0', width: '0%'}); 
    });
  });
</script>

- I would like to zoom to the graph clicking on this slide

```{r}
#| echo: false
library(ggplot2)
ggplot(mtcars, aes(x = cyl, y = mpg)) +
  geom_point()
```

## Next Slide

- Zoom in and zoom out on Plots & Images in one click

:::: {.columns}

::: {.column width="60%"}
```{r}
#| label: fig-plot-01
#| fig-cap: Plot 1
#| fig-alt: Plot showing the variation...
#| fig-width: 12
#| fig-height: 5
#| fig-align: 'center'
#| echo: false
plot(mtcars$cyl)
``` 
:::

::: {.column width="40%"}
```{r}
#| label: fig-plot-02
#| fig-cap: Plot 2
#| fig-alt: Plot showing the variation...
#| fig-width: 3
#| fig-height: 3
#| fig-align: 'center'
#| echo: false
plot(mtcars$mpg)
``` 
:::

::::  

只需放置<script>...</script>在您的第一张/任何/最后一张幻灯片中，或者放置在 R Markdown 和 Quarto 的 YAML 之后（请参阅此处了解更多信息）。

更新：我们可以在 YAML 标头中包含原始内容：

---
title: "Zoom on graph in slide"
format:
  revealjs:
    include-in-header:
      - text: |
          <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js""></script>
          <script type="text/javascript">
            $(document).ready(function() {
              $('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
              // onClick function for all plots (img's)
              $('img:not(.zoomImg)').click(function() {
                $('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
                $('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
              });
              // onClick function for zoomImg
              $('img.zoomImg').click(function() {
                $('.zoomDiv').css({opacity: '0', width: '0%'}); 
              });
            });
          </script>
---

或者，我们可以提供一个文件，例如：zoom-in-out.html，我们之前放置脚本的位置：

---
title: "Zoom on graph in slide"
format:
  revealjs:
    include-in-header:
      - file: zoom-in-out.html
---