Plotly.js - анимация Heatmap очень яркая

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 (как показано здесь ), он даже не отображает график тепловой карты.

Почему это происходит?

Как я могуисправить мерцание и получить плавную анимацию (с двойной буферизацией или чем-то подобным)?

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>