我正在使用本教程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 的值正在通过鼠标光标进行更新。
为什么动画不可见?
谢谢
答案 0 :(得分: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>