Как добавить интерактивную визуализацию в R markdown

мой вопрос в том, что я хочу интегрировать d3.визуализация js для моей уценки, а не ссылка, указывающая на визуализацию на внешнем веб-сайте. Есть ли способ достичь этого?

11
d3.js r r-markdown

1 ответов

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

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

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

8