R 中的 r2d3：如何使两个图表彼此相邻？答案

【问题标题】：r2d3 in R: how to make two charts next to each other?R 中的 r2d3：如何使两个图表彼此相邻？
【发布时间】：2023-02-15 07:10:26
【问题描述】：

使用 r2d3 包，我可以使用如下所示在 RMarkdown 中呈现一个简单的 d3.js 图表：

条形图.js:

// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)

var barHeight = Math.floor(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 out.width='100%', fig.height=4}
library(r2d3)
r2d3(data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20), script = "barchart.js")

但是，假设我想并排绘制同一张图表（即在 RMarkdown 中两个图表并排绘制）。有没有办法做到这一点？使用简单的 RMarkdown 执行此操作很容易，因为您可以保存绘图，然后在网格中排列。有没有办法在 r2d3 中做到这一点？它不会将每个绘图保存为一个可以排列在网格中的对象。

【问题讨论】：

那么 RMarkdown 有样式功能吗？假设图形被附加到一个元素，在那种情况下，是什么阻止你用一些 CSS 对你的 JS 代码做同样的事情？
我的问题是我试图显示的两个并排图表具有不同的数据，而 r2d3 渲染器一次只能指定一个数据源。即我认为您不会为 js 脚本提供两个数据源。出于这个原因，我想单独呈现图表，然后将它们并排配对。

标签： javascript html d3.js r-markdown r2d3

【解决方案1】：

我想有多种方法可以做到这一点。一种选择是使用 crosstalk 包中实现的 Bootstrap Columns：


library(r2d3)
library(crosstalk)

crosstalk::bscols(
  widths = c(6, 6),
   r2d3(data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20), script = "barchart.js", 
        width = 300, height = 200),
   r2d3(data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20), script = "barchart.js", 
        width = 300, height = 200)
)

On a side note - bscols is pretty useful to arrange any interactive html-widgets as well，可以解决大多数情况，在这些情况下，“正常”的 Rmd 输出不容易安排。

【讨论】：