Как добавить интерактивную визуализацию в 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 или любое имя вы хотели бы. Если вы измените имя, просто не забудьте изменить ссылку в includes в yaml вашего Rmd.

Как я уже говорил, это намного проще, если у вас есть d3.js локально, который вы хотели бы использовать.

Кроме того, <script src='...'></script> внутри корпуса будет работать, если вы не знаете о своих js в заголовке. В этом случае просто включите его в любом месте Rmd.