如何使 Rmarkdown 中的图表具有移动响应性？答案

【问题标题】：How to make charts in Rmarkdown mobile-responsive?如何使 Rmarkdown 中的图表具有移动响应性？
【发布时间】：2021-11-12 15:56:12
【问题描述】：

我正在使用 R 中的 r2d3 库在 RMarkdown 中插入一些 d3 图表。我正在编织 HTML。我的问题是我似乎无法弄清楚如何使 RMarkdown 移动响应（我希望图表动态调整大小）。

这是一个简单的例子：

d3 脚本（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")

在 R Studio 预览窗格中，图表可以自动调整大小。在 HTML 文档中，它没有。

【问题讨论】：

标签： html r d3.js r2d3

【解决方案1】：

实际上，这对我有帮助：

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

我只是将 RMarkdown 中的块设置为：

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

似乎适用于 d3 图表。

【讨论】：

您也许可以解释一下如何将您找到的答案应用于您的问题。