文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Rmarkdown文档中使用JavaScritp添加下载按钮

问如何在Rmarkdown文档中使用JavaScritp添加下载按钮
EN

Stack Overflow用户

提问于 2022-09-29 16:21:10

回答 1查看 57关注 0票数 3

我正在使用BioCircosR创建circos的地块。BioCircosR允许将交互式绘图保存为.hmtl文件。不过，我需要编辑生成的情节，在插图制作一个数字。我在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}

需要(针织品)

#关闭介面和警告，使输出不以任何东西为前缀，

默认情况下，出于某种原因，将"##“置于所有输出的前面

#还将整洁设置为true，以便正确包装代码

opts_chunk$set(message=FALSE，warning=FALSE，注释= ""，cache = F)

选项(宽度= 200)

```{js}

函数addSvgSaveButtonJquery(buttonId，topSvg) {

$(buttonId).append("")

$(ButtonId).click(函数()){

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}

图书馆(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，“Bbu4”= 236595445，"Bbu8“= 231667822，"Bbu9”= 230778867，"Bbu10“= 151572763，"Bbu11”= 103205957)

links_chromosomes_01 <- c("Xtr1“、"Xtr2”、"Xtr3“、"Xtr4”、"Xtr4“、"Xtr5”、"Xtr6“、"Xtr7”、"Xtr7“、"Xtr8”、"Xtr8“、"Xtr9”、"Xtr10")

links_chromosomes_02 <- c("Bbu2“、"Bbu3”、"Bbu1“、"Bbu9”、"Bbu10“、"Bbu4”、"Bbu5“、"Bbu6”、"Bbu1“、"Bbu8”、"Bbu3“、"Bbu7”、"Bbu6")

染色体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、253017、25614、946153、264320828819、1850876、123913217、51237349、34237851、53357604、78270031、253017、25614、946153、264320828819、1850876、123913217、51237349、3423751、53357604、78270031、253017、25614、946153、26428928819、1850876、123913217、51237349、34237851、53357604、78270031、253017、25614、64614、94266153、4493928819、1850876、123913217、121237349、3423751、53357604、28828819、28828、28876、27876、27876、1783637、1783637、174583637、1783637、174583637、1783637、1758837、1745837、1758837、1745837)。

染色体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、23171772、3541010999、22772772773、11237030、109867730、25338955、473876792、124495704、46258030、572314729、141584107、426419779、531246660、23171772、354101010773、16156630、109857736、25338955、473876792、124495704、46258030、5723729、141584107、426419779、53126660、2317772、354101010773、1123703030、11707237030、2370237045、277233233402372336045、274237273123U、27223834、152233123U、1522334、1521234、1521234、1521234、1521234、1521234、1521234、1521274、1521234、1521234、1521234、1521274、1521274、1521274、1521234、1521274、1521274、1521274、1521274、152

tracklist = BioCircosLinkTrack('myLinkTrack'，links_chromosomes_01，links_pos_01，links_pos_01，links_chromosomes_02，links_pos_02，links_pos_02，maxRadius = 1，标签= links_labels)

BioCircos(tracklist，基因组= Xtr_Bbu_genomes，elementID = "Xtr_Bbu_circos_plot"，genomeFillColor = "RdBu"，chrPad = 0.05，displayGenomeBorder = FALSE)

```{js}

$("#myXtr_Bbu_circos_plot").append("Save“)；

//下载按钮和svg元素的选择器

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

sessionInfo()

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

svg

r-markdown

javascript

回答 1

Stack Overflow用户

发布于 2022-09-29 19:10:35

你会嘲笑这个(希望！)：

您需要处理上面的注释，还需要将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}

需要(针织品)

#关闭介面和警告，使输出不以任何东西为前缀，

默认情况下，出于某种原因，将"##“置于所有输出的前面

#还将整洁设置为true，以便正确包装代码

opts_chunk$set(message=FALSE，warning=FALSE，注释= ""，cache = F)

选项(宽度= 200)

```{js}

函数addSvgSaveButtonJquery(buttonId，topSvg) {

$(buttonId).append("")

$(ButtonId).click(函数()){

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}

图书馆(BioCircos)

links_chromosomes_01 <- c("Xtr1“、"Xtr2”、"Xtr3“、"Xtr4”、"Xtr4“、"Xtr5”、"Xtr6“、"Xtr7”、"Xtr7“、"Xtr8”、"Xtr8“、"Xtr9”、"Xtr10")

links_chromosomes_02 <- c("Bbu2“、"Bbu3”、"Bbu1“、"Bbu9”、"Bbu10“、"Bbu4”、"Bbu5“、"Bbu6”、"Bbu1“、"Bbu8”、"Bbu3“、"Bbu7”、"Bbu6")

染色体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、23171772、3541010999、22772772773、11237030、109867730、25338955、473876792、124495704、46258030、572314729、141584107、426419779、531246660、23171772、354101010773、1615667030、109857736、25338955、473876792、124495704、46258030、5723729、141584107、426419779、53126660、2317772、354101010773、1123703030、1170237030、2370237045、27237233402372336045、274237273123U、27223834、1522331234、1522331234、1521234、1521234、1521234、1521234、1521234、1521234、1521274、1521234、1521234、1521234、1521274、1521274、1521274、1521234、1521274、1521274、1521274、1521274、152

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，基因组= Xtr_Bbu_genomes，elementId = "Xtr_Bbu_circos_plot"，genomeFillColor = "RdBu"，chrPad = 0.05，displayGenomeBorder = FALSE)

```{js}

$("#Xtr_Bbu_circos_plot").append("Save“)；

//下载按钮和svg元素的选择器

addSvgSaveButtonJquery("#save_svg"，"#Xtr_Bbu_circos_plot svg")；

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73898770

复制

相似问题

问如何在Rmarkdown文档中使用JavaScritp添加下载按钮
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Rmarkdown文档中使用JavaScritp添加下载按钮EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Rmarkdown文档中使用JavaScritp添加下载按钮
EN