gpt4 book ai didi

html - rmarkdown html图中的缩放功能

转载 作者:行者123 更新时间:2023-12-01 21:56:45 26 4
gpt4 key购买 nike

有没有办法,就像这个 SO 问题 here , 向使用 rmarkdown 创建的 html_documents 添加缩放功能?我在 Rstudio 工作。我尝试了以下方法,但当然,它不起作用:

---
title: Zoom in on Plots
author: "MS"
output: html_document
---

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

我是 R-Markdown 的新手,我不懂 html 和 JS,所以这对我来说很难。

最佳答案

围绕 Martin 的解决方案进行了一些改动(将元素置于视口(viewport) - 浏览器窗口的中心)。

# Insert this two chunks after YAML

```{css zoom-lib-src, echo = FALSE}
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
```

```{js zoom-jquery, echo = FALSE}
$(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%'});
});
});
```

点击Knit按钮后,将生成一个文档(您可能需要点击在浏览器中打开来生成JavaScript)。
输出(点击图表放大/缩小):

enter image description here

关于html - rmarkdown html图中的缩放功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56361986/

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