Plotly.js-gd.data必须是一个数组 [英] Plotly.js - gd.data must be an array

问题描述

我正在使用Plotly.js库绘制3D图形.我的计划是将4条迹线绘制到一张3D图形中.但是当我尝试这样做时，我的网站出现了一些奇怪的行为.

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.

有时候，当我加载我的网站时，我没有任何错误，并且所有4条迹线都完美地加载到了我的3D图形中.但是在另一时间，并不是所有的轨迹都被加载到图形中，并且出现了错误:

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:

Error: gd.data must be an array.

这是我用于从CSV文件添加跟踪的功能:

This is my function for adding the traces from a CSV file:

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);
    });
}

这就是我创建3D图形的方式:

And this is how i create the 3D graph:

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});
    });
}

这就是我在html文件中调用函数的方式:

And this is how I call the functions in my html file:

<script>
print3DMultiGraphMain('tester','out1.csv');

addTraceFromCSVlightColor('tester','out2.csv');
addTraceFromCSVdarkColor('tester','out3.csv');
addTraceFromCSVlightColor('tester','out4.csv');
</script>

推荐答案

当包含图表的div不具有数组类型的属性data时，将发生错误gd.data must be an array. 这可能是因为当您尝试添加跟踪时，例如图表尚未正确初始化.如果您的addTrace调用之一完成后，您的异步MultigraphMain调用完成了.

The error gd.data must be an array is going to occur when the div containing the chart does not have a property dataof type Array. This might be because the chart is not properly initialized yet when you try to add traces, e.g. in case your asynchronous MultigraphMain call completes after one of your addTrace calls.

为了避免出现此问题，您必须等待创建图表后才能尝试添加轨迹. Plotly.newPlot()返回一个承诺.我在下面附加了一个最小的展示柜.

In order to circumvent the problem you have to wait for the chart to be created before you try to add traces. Plotly.newPlot() returns a promise. I have attached a minimal showcase below.

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter'
};

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getInitialData() {
  // simulate HTTP call
  await sleep(2000);
  return trace1;
}

getInitialData().then((trace) => {
	Plotly.newPlot('myPlot', [trace]).then(
    () => {
  	  Plotly.addTraces('myPlot', [trace2]);
    }
  );		
})

// if you call addTraces here, it is going to fail
// Plotly.addTraces('myPlot', [trace2]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.49.5/plotly.min.js"></script>
<div id="myPlot">
</div>

这篇关于Plotly.js-gd.data必须是一个数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！