如何让RMarkdown中r2d3生成的d3图表实现移动端响应式？

RStudio预览面板内置了htmlwidget的自适应调试逻辑，独立HTML输出时r2d3默认会固定渲染时的宽高，且你当前使用的D3脚本没有监听容器尺寸变化事件，不会触发重绘，因此响应式效果失效。

1. 调整RMarkdown头部配置与r2d3调用参数 #

首先在RMarkdown的YAML头部添加viewport元标签，保证移动端正确识别页面宽度：

---
title: "你的文档标题"
output:
  html_document:
    meta:
      viewport: "width=device-width, initial-scale=1.0"
---

然后修改r2d3调用代码，添加响应式的尺寸配置：

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",
  # 添加响应式尺寸策略
  sizingPolicy = htmlwidgets::sizingPolicy(
    knitr.figure = TRUE,
    knitr.defaultWidth = "100%",
    knitr.defaultHeight = "400px", # 可自定义默认高度
    browser.fill = TRUE,
    padding = 10
  )
)

2. 改写D3脚本，添加重绘逻辑 #

你现有的D3代码只会在页面首次加载时执行一次，窗口/容器尺寸变化时不会更新，需要封装绘图逻辑并绑定r2d3的resize回调：

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

// 封装绘图逻辑为可复用函数
function draw() {
  // 清空原有内容，避免重复绘制
  svg.selectAll("*").remove();
  
  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');
}

// 首次加载执行绘图
draw();

// 绑定尺寸变化回调，容器尺寸改变时重绘
r2d3.onResize(draw);

3. 可选：补充CSS适配规则 #

如果还是存在尺寸溢出问题，可以在RMarkdown中添加一段自定义CSS，强制r2d3容器占满父级宽度：

<style>
.r2d3 {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
</style>

完成以上修改后重新knit HTML，图表即可在PC端窗口缩放、移动端设备切换时自动调整尺寸。

内容的提问来源于stack exchange，提问作者DiamondJoe12