如何放大Rmarkdown演示文稿中的图 [英] How to zoom in on plots inside an Rmarkdown presentation

问题描述

我正在用rmarkdown(ioslides)创建我的第一个HTML-演示文稿，并希望能够手动放大幻灯片并导航到对象.
在浏览器(crtl +，crtl鼠标滚轮)中，缩放效果很好，但是我无法移动幻灯片.既不使用鼠标也不使用滚动条.后者不像它们那样出现.在网站上.
是否有实现这种事情的适当方法，或者不打算像这样使用滑坡?

I am creating my first HTML - presentation with rmarkdown (ioslides) and would like to be able to manually zoom into a slide and navigate to an object.
Zooming works fine in a browser (crtl +, crtl mouse wheel) but I can not move the slide. Neither with the mouse nor with scrollbars. The latter do not appear as they do e.g. on a website.
Is there an appropriate way to implement such a thing or are ioslides not meant to be used like this?

我正在使用Ubuntu 16.04(LXDE)和rstudio(R版本3.2.3).我尝试在Firefox和Chromium中进行缩放和导航.

I am using Ubuntu 16.04 (LXDE) and rstudio (R version 3.2.3). I tried zooming and navigating in Firefox and 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的答案，因此也第一次没有找到答案.

推荐答案

我认为您的问题主要是关于如何放大一些小图.这是使用jQuery的解决方案:

我们基本上在幻灯片中添加了一个带有img元素的div容器.之后，我们将onClick功能集成到所有绘图(也称为img元素)和具有类zoomImg的图像.如果您单击某个图，它将显示在我们的容器内，如果您单击该容器，它将再次消失.这是代码:

We basically add a div container with an img element inside to our slides. Afterwards we integrate onClick functionalities to both, all the plots (aka img elements) and the image with class zoomImg. If you are clicking on a plot, it will be displayed inside our container and if you click on that container, it will vanish again. Here's the 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")
``` 

这将导致以下演示:

不单击:

单击第一个图:

要使其适用于普通的HTML文档，请更改

To make this work for a normal HTML document, change

$('slides').prepend("<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>");

到

$('body').prepend("<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>");

这篇关于如何放大Rmarkdown演示文稿中的图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！