javascript - 如何在 Rmarkdown 文档中使用 JavaScript 添加下载按钮

Question

我正在使用 BioCircosR 来创建圆环图。 BioCircosR 允许将交互式绘图保存为 .hmtl 文件。但是，我需要在 Illustrator 中编辑生成的图来制作图形。我在 GitHub 上找到了一个脚本，它可以通过向 BioCircosR 的 .hmtl 输出添加一个 SVG 下载按钮来解决我的问题。当我使用作者提供的示例运行此 Rmarkdown 脚本时，SVG 按钮出现在 .hmtl 文件中:

但是，当我使用自己的数据尝试此解决方案时，生成的 .hmtl 中未附加 SVG 按钮:

我在想我可能在 JS 脚本中做错了什么来添加 SVG 按钮。我没有 JS 背景，我只是从 GitHub 代码中获取它并用我自己的数据创建一个 Rmarkdown 文档。我是否遗漏了 JS 脚本中的某些内容？是否有必要在 SVG 按钮代码中添加一些东西？很抱歉问你们，几个月前我在脚本作者 GitHub 页面上发布了一个问题，但我没有得到任何答案。我的 Rmarkdown 代码如下:

---
title: "BioCircos on Xtr and Bbu"
author: "Kaleb Gatto"
output:
 html_document:
  highlight: textmate
  code_folding: show
  theme: readable
---


```{r setup, echo=FALSE, message=FALSE}
require(knitr)
#turn off mesages and warnings and make it so output isn't prefixed by anything,
#default is to put "##" in front of all output for some reason
#also set tidy to true so code is wrapped properly 
opts_chunk$set(message=FALSE, warning=FALSE, comment = "", cache = F)
options(width = 200)
```
```{js}
function addSvgSaveButtonJquery(buttonId, topSvg) {
  $(buttonId).append("<a id=imgDownload></a>")
  $(buttonId).click(function() {
    var html = $(
    $(topSvg).attr("version", 1.1)
             .attr("xmlns","http://www.w3.org/2000/svg")).clone()
      .wrap('<p/>').parent().html();
    // add the svg information to a and then click it to trigger the
    // download
    var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);
    $(buttonId + " #imgDownload").attr("download", "graph.svg");
    $(buttonId + " #imgDownload").attr("href", imgsrc);
    var a = $(buttonId + " #imgDownload")[0];
    a.click();
  });
}
```
```{r, fig.width=10, fig.height=10}
library(BioCircos)
Xtr_Bbu_genomes <- list("Xtr1" = 217471166, "Xtr2" = 181034961, "Xtr3" = 153873357, "Xtr4" = 153961319, "Xtr5" = 164033575, "Xtr6" = 154486312, "Xtr7" = 133565930, "Xtr8" = 147241510, "Xtr9" = 91218944, "Xtr10" = 52432566, "Bbu1" = 843366180, "Bbu2" = 842558404, "Bbu3" = 707956555, "Bbu4" = 635713434, "Bbu5" = 567300182, "Bbu6" = 439630435, "Bbu7" = 236595445, "Bbu8" = 231667822, "Bbu9" = 230778867, "Bbu10" = 151572763, "Bbu11" = 103205957) # custom genome
links_chromosomes_01 <- c("Xtr1", "Xtr2", "Xtr3", "Xtr4", "Xtr4", "Xtr5", "Xtr6", "Xtr7", "Xtr7", "Xtr8", "Xtr8", "Xtr9", "Xtr10") # Chromosomes on which the links should start
links_chromosomes_02 <- c("Bbu2", "Bbu3", "Bbu1", "Bbu9", "Bbu10", "Bbu4", "Bbu5", "Bbu6", "Bbu1", "Bbu8", "Bbu3", "Bbu7", "Bbu6") # Chromosomes on which the links should end
links_pos_01 <- c(115060347, 102611974, 14761160, 128700431, 128681496, 42116205, 58890582, 40356090, 146935315, 136481944, 157464876, 39323393, 84752508, 136164354, 99573657, 102580613, 111139346, 120764772, 90748238, 122164776, 44933176, 18823342, 48771409, 128288229, 150613881, 18509106, 123913217, 51237349, 34237851, 53357604, 78270031, 25306417, 25320614, 94266153, 41447919, 28810876, 2802465, 45583472, 81968637, 27858237, 17263637, 30569409) ### links Xtr chromosomes
links_pos_02 <- c(410543481, 463189512, 825903588, 353914638, 354135472, 717707494, 643107332, 724899652, 583713545, 558756961, 642015290, 154999098, 340216235, 557731577, 643350872, 655077847, 85356666, 157889318, 226411560, 161566470, 109857786, 25338955, 473876792, 124495704, 46258030, 572314729, 141584107, 426419779, 531245660, 220131772, 353941099, 62422773, 62387030, 116923325, 76544045, 33452274, 7942164, 642047816, 215981114, 39278129, 23302654, 418922633) ### links Bbu chromosomes
tracklist = BioCircosLinkTrack('myLinkTrack', links_chromosomes_01, links_pos_01, links_pos_01, links_chromosomes_02, links_pos_02, links_pos_02, maxRadius = 1, labels = links_labels)
BioCircos(tracklist, genome = Xtr_Bbu_genomes, elementID = "Xtr_Bbu_circos_plot", genomeFillColor = "RdBu", chrPad = 0.05, displayGenomeBorder = FALSE)
```
```{js}
$("#myXtr_Bbu_circos_plot").append("<button id=save_svg>Save As Svg</button>");
//Give the selectors for button and svg element to download
addSvgSaveButtonJquery("#save_svg", "#myXtr_Bbu_circos_plot svg");
```

我自己的数据图的编织渲染如下:

processing file: Teste_01.Rmd
  |............                                                          |  17%
  ordinary text without R code

  |.......................                                               |  33%
label: setup (with options) 
List of 2
 $ echo   : logi FALSE
 $ message: logi FALSE

  |...................................                                   |  50%
label: unnamed-chunk-1 (with options) 
List of 1
 $ engine: chr "js"

Carregando pacotes exigidos: knitr
  |...............................................                       |  67%
  ordinary text without R code

  |..........................................................            |  83%
label: unnamed-chunk-2 (with options) 
List of 3
 $ tidy      : logi TRUE
 $ fig.width : num 10
 $ fig.height: num 10

  |......................................................................| 100%
label: unnamed-chunk-3 (with options) 
List of 1
 $ engine: chr "js"


output file: Teste_01.knit.md

"C:/Program Files/RStudio/bin/quarto/bin/tools/pandoc" +RTS -K512m -RTS Teste_01.knit.md --to html4 --from markdown+autolink_bare_uris+tex_math_single_backslash --output Teste_01.html --lua-filter "D:\Users\kaleb\Documents\R\win-library\4.1\rmarkdown\rmarkdown\lua\pagebreak.lua" --lua-filter "D:\Users\kaleb\Documents\R\win-library\4.1\rmarkdown\rmarkdown\lua\latex-div.lua" --self-contained --variable bs3=TRUE --standalone --section-divs --template "D:\Users\kaleb\Documents\R\win-library\4.1\rmarkdown\rmd\h\default.html" --no-highlight --variable highlightjs=1 --variable theme=readable --mathjax --variable "mathjax-url=https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" --include-in-header "C:\Users\User\AppData\Local\Temp\RtmpyeD9Tl\rmarkdown-str3d8c45467.html" --variable code_folding=show --variable code_menu=1 
[WARNING] Deprecated: --self-contained. use --embed-resources --standalone

Output created: Teste_01.html
Warning message:
package 'BioCircos' was built under R version 4.1.2

session 信息()

R version 4.1.1 (2021-08-10)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19043)

Matrix products: default

locale:
[1] LC_COLLATE=Portuguese_Brazil.1252  LC_CTYPE=Portuguese_Brazil.1252    LC_MONETARY=Portuguese_Brazil.1252
[4] LC_NUMERIC=C                       LC_TIME=Portuguese_Brazil.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] knitr_1.38      BioCircos_0.3.4

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.9         digest_0.6.29      plyr_1.8.7         jsonlite_1.8.0     evaluate_0.15      rlang_1.0.5       
 [7] cli_3.2.0          rstudioapi_0.13    rmarkdown_2.13     RColorBrewer_1.1-3 tools_4.1.1        htmlwidgets_1.5.4 
[13] xfun_0.30          yaml_2.3.5         fastmap_1.1.0      compiler_4.1.1     htmltools_0.5.2

Answer 1

你会 mock 这个(希望如此!):

需要解决上面的注释，还需要将elementID修改为elementId。

---
title: "BioCircos on Xtr and Bbu"
author: "Kaleb Gatto"
output:
 html_document:
  highlight: textmate
  code_folding: show
  theme: readable
---


```{r setup, echo=FALSE, message=FALSE}
require(knitr)
#turn off mesages and warnings and make it so output isn't prefixed by anything,
#default is to put "##" in front of all output for some reason
#also set tidy to true so code is wrapped properly 
opts_chunk$set(message=FALSE, warning=FALSE, comment = "", cache = F)
options(width = 200)
```

```{js}
function addSvgSaveButtonJquery(buttonId, topSvg) {
  $(buttonId).append("<a id=imgDownload></a>")
  $(buttonId).click(function() {
    var html = $(
    $(topSvg).attr("version", 1.1)
             .attr("xmlns","http://www.w3.org/2000/svg")).clone()
      .wrap('<p/>').parent().html();
    // add the svg information to a and then click it to trigger the
    // download
    var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);
    $(buttonId + " #imgDownload").attr("download", "graph.svg");
    $(buttonId + " #imgDownload").attr("href", imgsrc);
    var a = $(buttonId + " #imgDownload")[0];
    a.click();
  });
}

```



```{r, fig.width=10, fig.height=10}
library(BioCircos)
Xtr_Bbu_genomes <- list("Xtr1" = 217471166, "Xtr2" = 181034961, "Xtr3" = 153873357, "Xtr4" = 153961319, "Xtr5" = 164033575, "Xtr6" = 154486312, "Xtr7" = 133565930, "Xtr8" = 147241510, "Xtr9" = 91218944, "Xtr10" = 52432566, "Bbu1" = 843366180, "Bbu2" = 842558404, "Bbu3" = 707956555, "Bbu4" = 635713434, "Bbu5" = 567300182, "Bbu6" = 439630435, "Bbu7" = 236595445, "Bbu8" = 231667822, "Bbu9" = 230778867, "Bbu10" = 151572763, "Bbu11" = 103205957) # custom genome
links_chromosomes_01 <- c("Xtr1", "Xtr2", "Xtr3", "Xtr4", "Xtr4", "Xtr5", "Xtr6", "Xtr7", "Xtr7", "Xtr8", "Xtr8", "Xtr9", "Xtr10") # Chromosomes on which the links should start
links_chromosomes_02 <- c("Bbu2", "Bbu3", "Bbu1", "Bbu9", "Bbu10", "Bbu4", "Bbu5", "Bbu6", "Bbu1", "Bbu8", "Bbu3", "Bbu7", "Bbu6") # Chromosomes on which the links should end
links_pos_01 <- c(115060347, 102611974, 14761160, 128700431, 128681496, 42116205, 58890582, 40356090, 146935315, 136481944, 157464876, 39323393, 84752508, 136164354, 99573657, 102580613, 111139346, 120764772, 90748238, 122164776, 44933176, 18823342, 48771409, 128288229, 150613881, 18509106, 123913217, 51237349, 34237851, 53357604, 78270031, 25306417, 25320614, 94266153, 41447919, 28810876, 2802465, 45583472, 81968637, 27858237, 17263637, 30569409) ### links Xtr chromosomes
links_pos_02 <- c(410543481, 463189512, 825903588, 353914638, 354135472, 717707494, 643107332, 724899652, 583713545, 558756961, 642015290, 154999098, 340216235, 557731577, 643350872, 655077847, 85356666, 157889318, 226411560, 161566470, 109857786, 25338955, 473876792, 124495704, 46258030, 572314729, 141584107, 426419779, 531245660, 220131772, 353941099, 62422773, 62387030, 116923325, 76544045, 33452274, 7942164, 642047816, 215981114, 39278129, 23302654, 418922633) ### links Bbu chromosomes
tracklist = BioCircosLinkTrack('myLinkTrack', links_chromosomes_01, links_pos_01, links_pos_01, links_chromosomes_02, links_pos_02, links_pos_02, maxRadius = 1)
BioCircos(tracklist, genome = Xtr_Bbu_genomes, elementId = "Xtr_Bbu_circos_plot", genomeFillColor = "RdBu", chrPad = 0.05, displayGenomeBorder = FALSE)
```

```{js}
$("#Xtr_Bbu_circos_plot").append("<button id=save_svg>Save As Svg</button>");
//Give the selectors for button and svg element to download
addSvgSaveButtonJquery("#save_svg", "#Xtr_Bbu_circos_plot svg");
```