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（如here所示），它甚至不会显示热图。

为什么会这样？

如何解决闪烁问题并获得平滑的动画（具有双缓冲或类似功能）？

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>

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

1 个答案: