Question

我正在使用本教程https://plot.ly/javascript/animations/#animating-many-frames-quickly使用Plotly为热图制作动画。到目前为止，我定义了一个矩阵 rho ，其中包含100 x 100个条目，这些条目使用 compute（）函数进行更新：

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
    <div id="graph" style="position: relative; width: 600px; height: 500px;"></div>

    <script>

    /* Define matrix that represents physical quantity */  

    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'
      }
    ];

    Plotly.newPlot('graph', data);

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


    function update() {

        compute();

        Plotly.animate('graph', {data: [{z: rho,type: 'heatmap'}]},
        {transition: {duration: 0}, frame: {duration: 0, redraw: false}}
        )

    requestAnimationFrame(update);
    }

    requestAnimationFrame(update);

  </script>

</body>

</html>

该页面将显示plot元素，而Firefox终端/调试器将仅输出不相关的错误：

The character encoding of the HTML document was not declared.

但是，图形不会显示，请不要注意动画。我可以看到 rho 的值正在通过鼠标光标进行更新。

为什么动画不可见？

谢谢

Answer 1

您需要在rho内定义update。见下文。

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.2 * (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: 750}, 
                        frame: {duration: 1000, redraw: true}})
        requestAnimationFrame(update); 
    }

    requestAnimationFrame(update);

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

Plotly.js-热图动画未显示

1 个答案: