R语言Plotly 3D散点图旋转动画相机视角重置问题求助

问题核心原因是你在onRender里调用的Plotly.update(id)——这个方法会触发图表布局重置，把你在R中通过layout设置的初始相机视角覆盖成默认值，导致动画从错误的视角开始旋转。

解决方案1：移除不必要的Plotly.update调用 #

如果不需要动态更新图表数据，直接删掉Plotly.update(id).then(attach);，直接启动动画逻辑即可保留初始视角：

%>%
  onRender(
    '
  function(el, x) {
    var id = el.getAttribute("id");
    var gd = document.getElementById(id);
    // 直接启动动画，跳过会重置布局的Plotly.update
    attach();
    
    function attach() {
      function run() {
        rotate("scene", Math.PI / 360);
        requestAnimationFrame(run);
      } 
      run();
      
      function rotate(id, angle) {
        var eye0 = gd.layout[id].camera.eye;
        var rtz = xyz2rtz(eye0);
        rtz.t += angle;
        
        var eye1 = rtz2xyz(rtz);
        Plotly.relayout(gd, id + ".camera.eye", eye1)
      }
      
      function xyz2rtz(xyz) {
        return {
          r: Math.sqrt(xyz.x * xyz.x + xyz.y * xyz.y),
          t: Math.atan2(xyz.y, xyz.x),
          z: xyz.z
        };
      }
      
      function rtz2xyz(rtz) {
        return {
          x: rtz.r * Math.cos(rtz.t),
          y: rtz.r * Math.sin(rtz.t),
          z: rtz.z
        };
      }
    }
  }
  '
  )

解决方案2：必须使用Plotly.update时重置初始视角 #

如果因为数据更新等需求必须调用Plotly.update，可以先从R传入的x参数中保存初始相机视角，在update完成后手动重置回初始值，再启动动画：

%>%
  onRender(
    '
  function(el, x) {
    var id = el.getAttribute("id");
    var gd = document.getElementById(id);
    // 从R的layout配置中获取初始相机视角
    var initialEye = x.layout.scene.camera.eye;
    
    Plotly.update(id).then(function() {
      // 把相机视角重置回你在R中设置的初始值
      Plotly.relayout(gd, "scene.camera.eye", initialEye);
      attach();
    });
    
    function attach() {
      function run() {
        rotate("scene", Math.PI / 360);
        requestAnimationFrame(run);
      } 
      run();
      
      function rotate(id, angle) {
        var eye0 = gd.layout[id].camera.eye;
        var rtz = xyz2rtz(eye0);
        rtz.t += angle;
        
        var eye1 = rtz2xyz(rtz);
        Plotly.relayout(gd, id + ".camera.eye", eye1)
      }
      
      function xyz2rtz(xyz) {
        return {
          r: Math.sqrt(xyz.x * xyz.x + xyz.y * xyz.y),
          t: Math.atan2(xyz.y, xyz.x),
          z: xyz.z
        };
      }
      
      function rtz2xyz(rtz) {
        return {
          x: rtz.r * Math.cos(rtz.t),
          y: rtz.r * Math.sin(rtz.t),
          z: rtz.z
        };
      }
    }
  }
  '
  )

说明 #

• 方案1适合静态图表场景，直接避免布局重置，动画会完全基于你在R中设置的初始视角开始旋转。
• 方案2针对需要动态更新数据的场景，通过保存并重置初始视角，确保动画从预期的位置启动。

内容的提问来源于stack exchange，提问作者Raven M. Osborn