如何将交互式可视化添加到R markdown

Question

我的问题是我想将d3.js可视化工具集成到我的降价工具中，而不是指向外部网站上的可视化工具的链接。有没有办法实现这一点？

Answer 1

要完成在我们的Rmd中添加非本地javascript（如d3.v3.min.js），有几种方法可以实现。如果您希望包含本地副本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的yaml中更改includes中的参考号。

正如我之前所说的，如果你想在本地使用d3.js，这会容易得多。

另外，身体内部的<script src='...'></script>将工作，如果你不是特别关心你的js在头上。在这种情况下，只需将其包含在Rmd中的任何位置即可。