javascript - Plotly.js - 热图动画非常闪烁

Question

我正在尝试使用 Plotly.js 为热图制作动画。

到目前为止，我得到了：

var rho = [];
for (var n = 0; n < 100; n++) {
  rho[n] = [];
  for (var l = 0; l < 100; l++) {
    rho[n][l] = n * l;
  }
}

var dummy = 1;

var data = [{
  z: rho,
  type: 'heatmap'
}];

function compute() {
  dummy++;
  for (n = 0; n < 100; n++) {
    for (l = 0; l < 100; l++) {
      data[0].z[n][l] = Math.sin(0.3 * (n * l - 0.05) + dummy);
    }
  }
}

Plotly.newPlot('graph', data);

function update() {
  compute();
  rho = data[0].z;
  Plotly.animate('graph', {
    data: [{
      z: rho,
      type: 'heatmap'
    }]
  }, {
    transition: {
      duration: 100
    },
    frame: {
      duration: 100,
      redraw: true
    }
  })
  requestAnimationFrame(update);
}

requestAnimationFrame(update);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph" style="position: relative; width: 600px; height: 500px;"></div>

但是，由于闪烁，此代码不会产生流畅的动画。

如果我将过渡或动画的持续时间设置为 0（如此处所示），它甚至不会显示热图。

为什么会这样？

如何修复闪烁并获得流畅的动画（使用双缓冲或类似的东西）？

标签： javascriptplotly

Answer 1

使用Plotly.redraw或Plotly.restyle 来防止清除框架。

var rho = [];
for (var n = 0; n < 100; n++) {
  rho[n] = [];
  for (var l = 0; l < 100; l++) {
    rho[n][l] = n * l;
  }
}

var dummy = 1;

var data = [{
  z: rho,
  type: 'heatmap'
}];

function compute() {
  dummy++;
  for (n = 0; n < 100; n++) {
    for (l = 0; l < 100; l++) {
      data[0].z[n][l] = Math.sin(0.3 * (n * l - 0.05) + dummy);
    }
  }
}

Plotly.newPlot('graph', data);

function update() {
    compute();
    rho = data[0].z;
    let myDiv = document.getElementById("graph");

    myDiv.data.z = rho
    Plotly.redraw(myDiv);

    // Plotly.restyle(myDiv, 'z', [rho]);
}

setInterval(function () {
    update()
}, 200.0);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph" style="position: relative; width: 600px; height: 500px;"></div>