gpt4 book ai didi

jquery - 如何放大 Rmarkdown 演示文稿中的绘图

转载 作者:太空狗 更新时间:2023-10-29 12:31:44 24 4
gpt4 key购买 nike

我正在创建我的第一个 HTML - 使用 rmarkdown (ioslides) 的演示文稿,并希望能够手动放大幻灯片并导航到一个对象。
缩放在浏览器中工作正常(crtl +,crtl 鼠标滚轮)但我无法移动幻灯片。既不使用鼠标也不使用滚动条。后者不像它们那样出现,例如在网站上。
是否有适当的方法来实现这样的事情,或者 ioslides 不应该像这样使用?

我正在使用 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 上找到答案,因此也是我的第一个条目。

最佳答案

我假设您的问题主要是关于如何放大一些小图。这是一个使用 jQuery 的解决方案:


我们基本上是在我们的幻灯片中添加一个带有 img 元素的 div 容器。之后,我们将 onClick 功能集成到所有绘图(又名 img 元素)和具有类 zoomImg 的图像中。如果你点击一个图,它会显示在我们的容器内,如果你点击那个容器,它会再次消失。这是代码:

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

这将产生以下演示文稿:

无点击:

enter image description here

点击第一个图:

enter image description here

要使它适用于普通的 HTML 文档,请更改

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

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

关于jquery - 如何放大 Rmarkdown 演示文稿中的绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40401680/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com