rmarkdown html 图中的缩放功能
Hel*_*len 4 html zooming r-markdown
有没有办法像这里的这个问题一样，向使用 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，所以这对我来说相当困难。
Rad*_*tić 12
围绕 Martin 的解决方案进行了一些修改（将视口中的元素居中 - 浏览器窗口）。
# 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）。
输出（点击图表放大/缩小）：
::::::::::::::::::::::::::::::
编辑四开本
# Insert this two chunks after YAML
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js""></script>
<script type="text/javascript">
$(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%'});
});
});
</script>
具有可重现的示例：
---
title: Zoom in and zoom out on Plots & Images in one click
author: "Matt Dzievit"
format: html
---
```{r}
#| label: setup
#| include: false
knitr::opts_chunk$set(echo = FALSE)
```
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js""></script>
<script type="text/javascript">
$(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%'});
});
});
</script>
## Click on graph to zoom in / zoom out
```{r}
#| label: fig-plot-01
#| fig-cap: Plot 1
#| fig-alt: Plot showing the variation...
#| fig-width: 12
#| fig-height: 5
#| fig-align: 'center'
#| echo: false
plot(mtcars$cyl, main = "Plot 1")
```
```{r}
#| label: fig-plot-02
#| fig-cap: Plot 2
#| fig-alt: Plot showing the variation...
#| fig-width: 5
#| fig-height: 5
#| fig-align: 'center'
#| echo: false
plot(mtcars$mpg, main = "Plot 2")
```
R Markdown (.Rmd) 和 Quarto (.qmd) 的更新，包括 YAML 标头中的原始内容：
---
title: Zoom in and zoom out on Plots & Images in one click
author: "Matt Dzievit"
format:
html:
include-in-header:
- text: |
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js""></script>
<script type="text/javascript">
$(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%'});
});
});
</script>
---
```{r}
#| label: setup
#| include: false
knitr::opts_chunk$set(echo = FALSE)
```
## Click on graph to zoom in / zoom out
```{r}
#| label: fig-plot-01
#| fig-cap: Plot 1
#| fig-alt: Plot showing the variation...
#| fig-width: 12
#| fig-height: 5
#| fig-align: 'center'
#| echo: false
plot(mtcars$cyl, main = "Plot 1")
```
```{r}
#| label: fig-plot-02
#| fig-cap: Plot 2
#| fig-alt: Plot showing the variation...
#| fig-width: 5
#| fig-height: 5
#| fig-align: 'center'
#| echo: false
plot(mtcars$mpg, main = "Plot 2")
```
或者，正如@LiangZhang 下面建议的那样，提供一个文件 ex: zoom-in-out.html，我们之前放置脚本的位置：
---
title: Zoom in and zoom out on Plots & Images in one click
author: "Matt Dzievit"
format:
html:
include-in-header:
- file: zoom-in-out.html
---
- @MattDzievit，您好，请参阅上面的“编辑四开本”。此外，您可能有兴趣探索 Quarto 的 [lightbox](https://github.com/quarto-ext/lightbox) 扩展。 (2认同)
| 归档时间： |
|
| 查看次数： |
3948 次 |
| 最近记录： |