TypeError: r[s[0]] is undefined

plotly.js
1

I want to make a contour animation with a slider.
but I find type error when I change the data.
when I use data 1 ,it is ok.
when i use data 2 ,it is bad.
follow is my code.

<!DOCTYPE html>
<html>


<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
  <script type="text/javascript">
      var data=[{
    z: [2,2,1], x: [1,2,3],y:[1,2,3],
    type:'contour',
 }];
 var layout= {
     xaxis:{
            range:[0,5],
     },
     yaxis:{
            range:[0,5],
     },
   sliders: [{
     active: 0,
     pad: {t: 30},
     x: 0.05,
     len: 0.95,
     currentvalue: {
       xanchor: 'right',
       prefix: 'color: ',
       font: {
         color: '#888',
         size: 20
       }
     },
     x: 0.1,
      len: 0.9,
      xanchor: "left",
      y: 0,
      yanchor: "top",
      pad: {t: 50, b: 10},
      currentvalue: {
        visible: true,
        prefix: "Time:",
        xanchor: "right",
        font: {
          size: 20,
          color: "#666"
        }
      },
     transition: {
        duration: 500,
        easing: "linear"
     },
     steps: [{
       label: 'red',
       method: 'animate',
       args: [['red'], {
         mode: 'immediate',
         frame: {redraw: true, duration: 500},
         transition: {duration: 500}
       }]
     }, {
       label: 'green',
       method: 'animate',
       args: [['green'], {
         mode: 'immediate',
         frame: {redraw: true, duration: 500},
         transition: {duration: 500}
       }]
     }, {
       label: 'blue',
       method: 'animate',
       args: [['blue'], {
         mode: 'immediate',
         frame: {redraw: true, duration: 500},
         transition: {duration: 500}
       }]
     }]
   }],
  
 };
var frame=[];

/* 1
frame[0] = {data: [{z: [1, 2, 3],x: [2, 1, 3],y:[1,2,3]}],name: 'red'};
frame[1] = {data: [{z: [1, 2, 3,4],x: [2,1,3,5],y:[1,2,5,3]}],name: 'green'};
frame[2] = {data: [{z: [1, 2, 3],x: [2, 1, 3],y:[3,2,1]}],name: 'blue'}
*/
/* 2
frame[0] = {data: [{z: [1, 2, 3],x: [2, 1, 3],y:[1,2,3]}],name: 'red'};
frame[1] = {data: [{z: [1, 2, 3,4],x: [2,1,3,5],y:[1,2,5,2]}],name: 'green'};
frame[2] = {data: [{z: [1, 2, 3],x: [2, 1, 3],y:[3,2,1]}],name: 'blue'}
*/


 Plotly.plot('graph',{data,layout,frames:frame});
  </script>
</body>
</html>
2

Looks like a bug.

I’d recommend inputing your contour trace data with a 2D z in the meantime.

4

Thank you very much.
Sorry, I don’t understand what is a 2D z.
Can you give me a example?
Besides,will the bug be fixed?
Thank you very much.

5

Googling plotly.js heatmap should do the trick: Heatmaps in JavaScript

Yes. But that’s a low-priority issue, so I can’t guarantee when it’s going to be fixed.

6

thank you very much.