个人中心
gpt4 book ai didi

r - Rmarkdown中的文本SVG图

转载 作者：行者123 更新时间：2023-12-04 12:26:05 25 4
gpt4 key购买 nike

我想在 Rmarkdown 的独立 HTML 文件中创建绘图，我认为 SVG 将是包含图形的好方法。

但是，即使设置 dev='svg' ，图形不在文本 SVG 中。

MWE(缩写为 javascript 和 img):

---
title: "SVG Plot"

output: html_document
---

```{r pressure, dev='svg'}
hist(1:4, xaxt='n', yaxt='n', ann=FALSE)
```

然而，这给出了以下 HTML 代码: 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />




<title>SVG Plot</title>

<script src="data:application/x-javascript;base64,LyohIGpRdWVyeSB2MS4xMS4zIHwgKGM.......bmdPbkxvYWQoKTsKCg=="></script>

<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>
<script type="text/javascript">
if (window.hljs && document.readyState && document.readyState === "complete") {
   window.setTimeout(function() {
      hljs.initHighlighting();
   }, 0);
}
</script>



<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>


</head>

<body>

<style type="text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
  height: auto;
}
.tabbed-pane {
  padding-top: 12px;
}
button.code-folding-btn:focus {
  outline: none;
}
</style>



<div class="container-fluid main-container">

<!-- tabsets -->
<script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});
</script>

<!-- code folding -->






<div class="fluid-row" id="header">



<h1 class="title toc-ignore">SVG Plot</h1>

</div>


<pre class="r"><code>hist(1:4, xaxt='n', yaxt='n', ann=FALSE)</code></pre>
<p><img src="data:image/svg+xml;base64,PD94bWwgdmV...............KPC9nPgo8L3N2Zz4K" width="672" /></p>




</div>

<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>

有没有办法只获取文本 SVG 图形(例如 svg() 或 ggsave() 输出什么)？

编辑: svg()例子: 
svg('base.svg')
hist(1:4, xaxt='n', yaxt='n', ann=FALSE)
dev.off()

给出: 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="504pt" height="504pt" viewBox="0 0 504 504" version="1.1">
<defs>
<clipPath id="clip1">
  <path d="M 59.039063 59.039063 L 474.757813 59.039063 L 474.757813 431.558594 L 59.039063 431.558594 Z M 59.039063 59.039063 "/>
</clipPath>
</defs>
<g id="surface6">
<rect x="0" y="0" width="504" height="504" style="fill:rgb(100%,100%,100%);fill-opacity:1;stroke:none;"/>
<g clip-path="url(#clip1)" clip-rule="nonzero">
<path style="fill:none;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 74.398438 416.800781 L 202.398438 416.800781 L 202.398438 72.800781 L 74.398438 72.800781 Z M 74.398438 416.800781 "/>
<path style="fill:none;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 202.398438 416.800781 L 330.398438 416.800781 L 330.398438 244.800781 L 202.398438 244.800781 Z M 202.398438 416.800781 "/>
<path style="fill:none;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 330.398438 416.800781 L 458.398438 416.800781 L 458.398438 244.800781 L 330.398438 244.800781 Z M 330.398438 416.800781 "/>
</g>
</g>
</svg>

另外，如果有一种方法可以获取文本 SVG，是否有充分的理由说明这不是首选？

最佳答案

可以实现文本 SVG(尽管使用 svglite package ，它不如基础 svg() 准确):

---
title: "SVG Plot"

output: html_document
---

```{r setup, include=FALSE}
library(knitr)
local({
  hook_plot = knit_hooks$get('plot')
  knit_hooks$set(plot = function(x, options) {
    x = paste(x, collapse = '.')
    if (!grepl('\\.svg', x)) return(hook_plot(x, options))
    # read the content of the svg image and write it out without <?xml ... ?>
    paste(readLines(x)[-1], collapse = '\n')
  })
})
```


```{r pressure, dev='svg'}
hist(1:4, xaxt='n', yaxt='n', ann=FALSE)
```

这给出: 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />




<title>SVG Plot</title>

<script src="data:application/x-javascript;base64,LyohIGpRdWVyeSB2MS4xM.........ihiKX0odGhpcyxkb2N1bWVudCk7Cn07Cg=="></script>
<script src="data:application/x-javascript;base64,LyohIFJlc3BvbmQuanMg........SgpOwpobGpzLmluaXRIaWdobGlnaHRpbmdPbkxvYWQoKTsKCg=="></script>

<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>
<script type="text/javascript">
if (window.hljs && document.readyState && document.readyState === "complete") {
   window.setTimeout(function() {
      hljs.initHighlighting();
   }, 0);
}
</script>



<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>


</head>

<body>

<style type="text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
  height: auto;
}
.tabbed-pane {
  padding-top: 12px;
}
button.code-folding-btn:focus {
  outline: none;
}
</style>



<div class="container-fluid main-container">

<!-- tabsets -->
<script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});
</script>

<!-- code folding -->






<div class="fluid-row" id="header">



<h1 class="title toc-ignore">SVG Plot</h1>

</div>


<pre class="r"><code>hist(1:4, xaxt='n', yaxt='n', ann=FALSE)</code></pre>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="504pt" height="360pt" viewBox="0 0 504 360" version="1.1">
<defs> <clipPath id="clip1"> <path d="M 59.039063 59.039063 L 474.757813 59.039063 L 474.757813 287.558594 L 59.039063 287.558594 Z M 59.039063 59.039063 "></path> </clipPath> </defs> <g id="surface1"> <rect x="0" y="0" width="504" height="360" style="fill:rgb(100%,100%,100%);fill-opacity:1;stroke:none;"></rect> <g clip-path="url(#clip1)" clip-rule="nonzero"> <path style="fill:none;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 74.398438 278.132813 L 202.398438 278.132813 L 202.398438 67.464844 L 74.398438 67.464844 Z M 74.398438 278.132813 "></path> <path style="fill:none;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 202.398438 278.132813 L 330.398438 278.132813 L 330.398438 172.800781 L 202.398438 172.800781 Z M 202.398438 278.132813 "></path> <path style="fill:none;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 330.398438 278.132813 L 458.398438 278.132813 L 458.398438 172.800781 L 330.398438 172.800781 Z M 330.398438 278.132813 "></path> </g> </g>
</svg>




</div>

<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>

这是基于@yihui 对@cboettig 发布的问题的评论 here (您现在可以使用 knitr 的 CRAN version)。

关于r - Rmarkdown中的文本SVG图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46279970/

25 4 0
文章推荐： C编程: character in scanf
文章推荐： .net - 使用 FindByThumbprint 找不到 X.509 证书
文章推荐： build-process - 获取 make 以在出错时删除其他文件
文章推荐： r - 如何从 R 中的数据框中删除包含唯一因子水平的行？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com