title: Plotly.js - gd.data must be an array
body: <p>I am using the Plotly.js library to draw 3D graphs. My plan is to draw 4 traces into one 3D graph. But I encounter some strange behavior of my website when I try do this.</p>
  
  <p>Sometimes, when I load my site I get no error and all 4 traces are loaded perfectly in my 3D graph. But at another time not all of my traces are loaded into my graph and I get the error:</p>
  
  <pre><code>Error: gd.data must be an array.
  </code></pre>
  
  <p>This is my function for adding the traces from a CSV file:   </p>
  
  <pre><code>function addTraceFromCSVdarkColor(divname,link)
  {
      Plotly.d3.csv(link, function(err, rows)
      {
          function unpack1(rows, key) 
          {
              return rows.map(function(row) { return row[key]; });
          }        
  
          var trace1 = {
              x: unpack1(rows, 'x'),
              y: unpack1(rows, 'y'),
              z: unpack1(rows, 'z'),
              mode: 'lines',
              type: 'scatter3d',
              opacity: 0.5,
              line: 
              {
                  color: 'rgb(252, 185, 0)',
                  size: 2,
                  opacity: 0.5
              }
          };
  
          var data = [trace1];
          Plotly.addTraces(divname,data);
      });
  }
  </code></pre>
  
  <p>And this is how i create the 3D graph:</p>
  
  <pre><code>function print3DMultiGraphMain(divname,link)
  {
      Plotly.d3.csv(link, function(err, rows)
      {
          function unpack1(rows, key) 
          {
          return rows.map(function(row) { return row[key]; });
          }        
  
          var trace1 = {
              x: unpack1(rows, 'x'),
              y: unpack1(rows, 'y'),
              z: unpack1(rows, 'z'),
              mode: 'lines',
              type: 'scatter3d',
              line: 
              {
                  color: 'rgb(252, 185, 0)',
                  size: 2
              }
          };
  
          var data = [trace1];
          var layout = {
              autorange: false,
              width: 800,
              height: 800,
              scene: 
              {
                  aspectratio: 
                  {
                      x: 1,
                      y: 1,
                      z: 1
                  },
                  x: 0,
                  y: 0,
                  camera: 
                  {
                      center: 
                      {
                          z: 0
                      },
                      eye: 
                      {
                          x: 1.25,
                          y: 1.25,
                          z: 1.25
                      },
                      up: 
                      {
                          x: 0,
                          y: 0,
                          z: 1
                      }
                  },
                  xaxis: 
                  {
                      type: 'linear',
                      range: [0, 200],
                      zeroline: false
                  },
                  yaxis: 
                  {
                      type: 'linear',
                      zeroline: false,
                      range: [0, 200]
                  },
                  zaxis: 
                  {
                      type: 'linear',
                      zeroline: false,
                      range: [0, 200]
                  }
              },
          };
          Plotly.newPlot(divname, data, layout,{displayModeBar: false});
      });
  }
  </code></pre>
  
  <p>And this is how I call the functions in my html file:</p>
  
  <pre><code>&lt;script&gt;
  print3DMultiGraphMain('tester','out1.csv');
  
  addTraceFromCSVlightColor('tester','out2.csv');
  addTraceFromCSVdarkColor('tester','out3.csv');
  addTraceFromCSVlightColor('tester','out4.csv');
  &lt;/script&gt;
  </code></pre>