Comment zoomer sur les graphiques dans une présentation Rmarkdown ?

Question

Je suis en train de créer ma première présentation HTML avec rmarkdown (ioslides) et j'aimerais pouvoir zoomer manuellement dans une diapositive et naviguer vers un objet.
Le zoom fonctionne bien dans un navigateur (crtl +, crtl molette de la souris) mais je ne peux pas déplacer la diapositive. Ni avec la souris, ni avec les barres de défilement. Ces dernières n'apparaissent pas comme elles le font par exemple sur un site web.
Existe-t-il un moyen approprié d'implémenter une telle chose ou les ioslides ne sont pas censés être utilisés de cette manière ?

J'utilise Ubuntu 16.04 (LXDE) et rstudio (R version 3.2.3). J'ai essayé de zoomer et de naviguer dans Firefox et Chromium.

exemple :

---
title: Zooming into an ioslide
author: "Robatt"
output: 
 ioslides_presentation: 
 fig_caption: yes
---

```{r setup, include=FALSE}
 knitr::opts_chunk$set(echo = FALSE)
```
##The slide to zoom in and navigate

```{r fig.align='left', out.width = "100px", dpi=300, 
fig.cap="a small graph to zoom in, when necessary"}
library(ggplot2)
x=c(1:30,by=0.1)
y=x/(1+x)
ggplot()+
  geom_smooth(aes(x=x,y=y),se=F,span=0.15,color="grey20")+
  labs(x="you can only read me after zooming in")
```

C'est aussi la première fois que je ne trouve pas de réponse sur stackoverflow et, par conséquent, ma première entrée.

Answer 1

Je suppose que votre question porte principalement sur la manière dont vous pourriez zoomer sur de minuscules parcelles. Voici une solution utilisant jQuery :

---

Nous ajoutons essentiellement un div avec un img à l'intérieur de nos diapositives. Ensuite, nous intégrons des fonctionnalités onClick à tous les deux, tous les tracés (aka img ) et l'image avec la classe zoomImg . Si vous cliquez sur un graphique, il sera affiché à l'intérieur de notre conteneur et si vous cliquez sur ce conteneur, il disparaîtra à nouveau. Voici le code :

---
title: Zoom in on Plots
author: "MS"
output: 
 ioslides_presentation: 
   fig_caption: yes
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<style>
.zoomDiv {
  opacity: 0;
  position:absolute;
  top: 50%;
  left: 50%;
  z-index: 50;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px #888888;
  max-height:100%; 
  overflow: scroll;
}

.zoomImg {
  width: 100%;
}
</style>

<script type="text/javascript">
  $(document).ready(function() {
    $('slides').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'));
      $('.zoomDiv').css({opacity: '1', width: '60%'});
    });
    // onClick function for zoomImg
    $('img.zoomImg').click(function() {
      $('.zoomDiv').css({opacity: '0', width: '0%'});
    });
  });
</script>

## First Slide

```{r fig.align='left', out.width = "100px", dpi=300, fig.cap="tiny"}
plot(mtcars$cyl, main = "Plot 1")
``` 

```{r fig.align='left', out.width = "100px", dpi=300, fig.cap="tiny"}
plot(mtcars$mpg, main = "Plot 2")
``` 

Cela donnera lieu à la présentation suivante :

Pas de clic :

Cliquez sur la première parcelle :