Rmarkdownプレゼンテーション内のプロットを拡大する方法

Question

rmarkdown（ioslides）を使用して私の最初のHTMLプレゼンテーションを作成していて、手動でスライドをズームしてオブジェクトに移動できるようにしたいと考えています。
ズーム機能はブラウザ（crtl +、crtlマウスホイール）で正常に機能しますが、スライドを移動することはできません。マウスでもスクロールバーでも。後者は、そうでないように現れる。ウェブサイト上で
このようなものを実装するための適切な方法はありますか？またはこのように使われることを意図したものではありませんか？

私はUbuntu 16.04（LXDE）とrstudio（Rバージョン3.2.3）を使用しています。私は、FirefoxとChromiumでズームとナビゲートを試みました。

例：

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

また、これは私がstackoverflowのと結果的に私の最初のエントリに答えを見つけられませんでした最初の時間です。

Answer 1

あなたの質問は、主に小さなプロットをどのように拡大することができるかということです。

---

私たちは、基本的に私たちのスライドに内部img要素でdivコンテナを追加します。ここではjQueryを使用したソリューションです。その後、すべてのプロット（別名img要素）とクラスzoomImgの画像の両方にonClick機能を統合します。プロットをクリックするとコンテナ内に表示され、コンテナをクリックすると再び消えます。ここでは、コードません：

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

これは、次のプレゼンテーションになります：

[いいえ]をクリックします：最初のプロット上

クリック：