我的问题是,我想将一个d3.js可视化图表集成到我的Markdown文档中,而不是提供一个指向外部网站的链接。有没有办法实现这一点?
我的问题是,我想将一个d3.js可视化图表集成到我的Markdown文档中,而不是提供一个指向外部网站的链接。有没有办法实现这一点?
d3.v3.min.js
添加到我们的Rmd中,有几种方法可供选择。如果您想要包含d3
的本地副本,则会更加容易。---
title: "rmarkdown example with external js"
output:
html_document:
self_contained: false
keep_md: true
includes:
in_header: "header_include_d3.html"
---
Let's create a very basic d3 graph using data from R. since the graph is d3, we will need the d3.js file for the graph to render.
```{r results='asis'}
cat('
<script>
d3.select("body").append("p").text("d3 made me")
</script>
')
```
<script>
// from https://www.dashingd3js.com/svg-paths-and-d3js
//The data for our line
var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20},
{ "x": 40, "y": 10}, { "x": 60, "y": 40},
{ "x": 80, "y": 5}, { "x": 100, "y": 60}];
//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
//The SVG Container
var svgContainer = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200);
//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
</script>
然后在与此.Rmd文件相同的目录中保存这个文件
<script src = "http://d3js.org/d3.v3.min.js"></script>
将其保存到一个名为header_include_d3.html
的文件中,或者任何你想要的名称。如果更改名称,请确保在您的Rmd的includes
中更改引用。
正如我之前所说,如果您有本地的d3.js要使用,这将变得容易得多。
此外,如果您对将js放在头部不太关注,则<script src='...'></script>
将在body内起作用。在这种情况下,只需在Rmd中的任何位置包含即可。
现在你有R2D3包可以实现这个! Rmardown是在R中包含D3可视化的一种方法 https://rstudio.github.io/r2d3/articles/publishing.html#r-markdown