如何在R中同步Plotly组合的3D散点图视图？

我在R中使用plotly包创建了一系列3D散点图，每个图根据数据集的不同变量着色，通过plotly::subplot()或manipulateWidget::combineWidgets()将它们组合成主图，示例代码如下：

# 加载包
library(dplyr)
library(plotly)
library("manipulateWidget")

# 加载数据集
library(datasets)
data(mtcars)

# 创建四个3D散点图
fig_1 <- plot_ly(mtcars, type = "scatter3d", x = ~mpg, y = ~cyl, z = ~ wt, color = ~as.factor(vs), 
                 colors = c("black", "grey"), scene = "scene",
                 mode = "markers", marker = list(size = 5, symbol = "circle"))

fig_2 <- plot_ly(mtcars, type = "scatter3d", x = ~mpg, y = ~cyl, z = ~ wt, color = ~as.factor(am),
                 colors = c("red", "blue"), scene = "scene2",
                 mode = "markers", marker = list(size = 5, symbol = "circle"))

fig_3 <- plot_ly(mtcars, type = "scatter3d", x = ~mpg, y = ~cyl, z = ~ wt, color = ~as.factor(gear),
                 colors = c("yellow", "brown", "orange"), scene = "scene3",
                 mode = "markers", marker = list(size = 5, symbol = "circle"))

fig_4 <- plot_ly(mtcars, type = "scatter3d", x = ~mpg, y = ~cyl, z = ~ wt, color = ~as.factor(carb),
                 colors = c("green", "pink", "cyan", "purple"), scene = "scene4",
                 mode = "markers", marker = list(size = 5, symbol = "circle"))

# 用subplot组合
main_plot <- subplot(fig_1, fig_2, fig_3, fig_4, nrows = 2, margin = 0.06) %>% 
  layout(title = "Main Plot", 
         scene= list(domain = list(x=c(0,0.5), y=c(0.5,1)), aspectmode="cube"), 
         scene2 = list(domain = list(x=c(0.5,1), y=c(0.5,1)), aspectmode="cube"),
         scene3 = list(domain = list(x=c(0,0.5), y=c(0,0.5)), aspectmode="cube"),
         scene4 = list(domain = list(x=c(0.5,1), y=c(0,0.5)), aspectmode="cube")
         )

main_plot

# 或用combineWidgets组合
combineWidgets(fig_1, fig_2, fig_3, fig_4) 

目前组合效果良好，但希望实现组合后的3D散点图视图同步：拖拽、缩放、旋转其中一个图时，其余三个图同步适配新视图。请问在R中针对子图或组合部件形式的3D散点图，是否可以实现该功能？

在R的plotly生态中，可通过自定义JavaScript事件监听实现多3D场景的视图同步，核心思路是监听场景的视图调整事件，提取相机参数并同步到其他场景。以下是两种场景的具体实现：

1. 针对plotly subplot的同步实现 #

利用htmlwidgets::onRender()给子图添加JS逻辑，监听plotly_relayout事件（对应旋转、缩放、拖拽等操作），同步所有场景的相机参数：

library(dplyr)
library(plotly)
library(htmlwidgets)
library(datasets)
data(mtcars)

# 创建四个3D散点图（代码与原示例一致）
fig_1 <- plot_ly(mtcars, type = "scatter3d", x = ~mpg, y = ~cyl, z = ~ wt, color = ~as.factor(vs), 
                 colors = c("black", "grey"), scene = "scene",
                 mode = "markers", marker = list(size = 5, symbol = "circle"))

fig_2 <- plot_ly(mtcars, type = "scatter3d", x = ~mpg, y = ~cyl, z = ~ wt, color = ~as.factor(am),
                 colors = c("red", "blue"), scene = "scene2",
                 mode = "markers", marker = list(size = 5, symbol = "circle"))

fig_3 <- plot_ly(mtcars, type = "scatter3d", x = ~mpg, y = ~cyl, z = ~ wt, color = ~as.factor(gear),
                 colors = c("yellow", "brown", "orange"), scene = "scene3",
                 mode = "markers", marker = list(size = 5, symbol = "circle"))

fig_4 <- plot_ly(mtcars, type = "scatter3d", x = ~mpg, y = ~cyl, z = ~ wt, color = ~as.factor(carb),
                 colors = c("green", "pink", "cyan", "purple"), scene = "scene4",
                 mode = "markers", marker = list(size = 5, symbol = "circle"))

# 组合子图并添加视图同步逻辑
main_plot <- subplot(fig_1, fig_2, fig_3, fig_4, nrows = 2, margin = 0.06) %>% 
  layout(title = "同步视图的3D子图", 
         scene= list(domain = list(x=c(0,0.5), y=c(0.5,1)), aspectmode="cube"), 
         scene2 = list(domain = list(x=c(0.5,1), y=c(0.5,1)), aspectmode="cube"),
         scene3 = list(domain = list(x=c(0,0.5), y=c(0,0.5)), aspectmode="cube"),
         scene4 = list(domain = list(x=c(0.5,1), y=c(0,0.5)), aspectmode="cube")
  ) %>%
  onRender("
    function(el, x) {
      // 定义所有需要同步的场景ID
      const scenes = ['scene', 'scene2', 'scene3', 'scene4'];
      
      // 为每个场景绑定视图调整事件
      scenes.forEach(sceneId => {
        el.on('plotly_relayout', function(eventData) {
          // 提取当前场景的相机参数（eye、up、center等）
          const cameraParams = Object.keys(eventData)
            .filter(key => key.startsWith(`${sceneId}.camera.`));
          if (cameraParams.length === 0) return;
          
          // 构造同步参数模板
          const updateTemplate = {};
          cameraParams.forEach(key => {
            const paramKey = key.replace(`${sceneId}.camera.`, '');
            updateTemplate[`{targetScene}.camera.${paramKey}`] = eventData[key];
          });
          
          // 将参数同步到其他场景
          scenes.forEach(targetScene => {
            if (targetScene !== sceneId) {
              const sceneUpdate = Object.fromEntries(
                Object.entries(updateTemplate).map(([k, v]) => [k.replace('{targetScene}', targetScene), v])
              );
              Plotly.relayout(el.id, sceneUpdate);
            }
          });
        });
      });
    }
  ")

# 渲染同步后的图表
main_plot

2. 针对manipulateWidget的同步实现 #

若使用combineWidgets，需给每个plotly widget添加相同的同步逻辑，或借助manipulateWidget::sync()结合自定义规则。但由于combineWidgets是将多个独立widget组合，同步逻辑需要跨实例通信，相对复杂。推荐优先使用subplot方案，若必须用combineWidgets，可参考以下思路：

• 给每个widget添加onRender逻辑，监听自身的plotly_relayout事件
• 通过JS的全局变量或DOM事件传递相机参数到其他widget
• 其他widget接收参数后执行Plotly.relayout更新视图

• 确保所有3D场景的x/y/z轴范围完全一致（示例中已满足，因使用同一数据集的相同变量），否则同步视图会出现错位
• 上述JS逻辑覆盖了旋转、缩放、拖拽等所有触发plotly_relayout的操作，若需同步其他视图参数（如视角范围），可扩展参数提取逻辑
• 若图表加载后同步失效，可检查场景ID是否与代码中定义的scene参数完全匹配

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