0

I'm using the r2d3 library in R to insert some d3 charts in an RMarkdown. I'm knitting to HTML. My issue is that I can't seem to figure out how to make the RMarkdown mobile-responsive (I want the charts to resize dynamically).

This is a simple example:

d3 script (test.js):

// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)
//
// r2d3: https://rstudio.github.io/r2d3
//

var barHeight = Math.ceil(height / data.length);

svg.selectAll('rect')
  .data(data)
  .enter().append('rect')
    .attr('width', function(d) { return d * width; })
    .attr('height', barHeight)
    .attr('y', function(d, i) { return i * barHeight; })
    .attr('fill', 'steelblue');

R-Markdown:

library(r2d3)
r2d3(data = c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20),
     script = "X:/public/Moss/D3 Practice/test.js",
     d3_version = "3")

In the R Studio preview pane, the chart auto-resizes just fine. In the HTML doc, it doesn't.

halfer
  • 19,824
  • 17
  • 99
  • 186
DiamondJoe12
  • 1,879
  • 7
  • 33
  • 81

1 Answers1

0

Actually, this helped me:

How to make plotly charts adjust to page width using rmarkdown?

I just set the chunk in RMarkdown to be:

{r out.width='100%', fig.height=3}

Seems to apply to d3 charts .

DiamondJoe12
  • 1,879
  • 7
  • 33
  • 81