Jak dodać interaktywną wizualizację do R markdown

Question

Moje pytanie brzmi: chcę zintegrować wizualizację d3.js z moim strumieniem zamiast linku wskazującego na wizualizację na zewnętrznej stronie. Czy istnieje sposób, aby to osiągnąć?

Answer 1

Aby dodać nielokalny javascript, taki jak d3.v3.min.js do naszego Rmd, istnieje kilka sposobów na zrobienie tego. Jeśli chcesz dołączyć lokalną kopię d3, jest to znacznie łatwiejsze.

To jest mój ulubiony sposób. Jeśli z jakiegoś powodu chciałbyś zobaczyć innych, z przyjemnością je pokażę. Uwaga: Nadal eksperymentuję.

--- 
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> 

następnie w tym samym katalogu co ten .Rmd pliku, zapisać

<script src = "http://d3js.org/d3.v3.min.js"></script> 

do pliku nazwałem header_include_d3.html lub dowolną nazwą, którą chcesz. Jeśli zmienisz nazwę, po prostu pamiętaj, aby zmienić odniesienie w includes w yaml swojego Rmd.

Jak już powiedziałem, jest to znacznie łatwiejsze, jeśli masz d3.js lokalnie, z którego chciałbyś skorzystać.

Ponadto, wewnątrz ciała będzie działać, jeśli nie masz szczególnych wymagań, czy twój js znajduje się w nagłówku. W takim przypadku wystarczy umieścić go w dowolnym miejscu w Rmd.