Javascript Plotly.js-gd.data必须是数组

我正在使用Plotly.js库绘制三维图形。我的计划是在一个3D图形中绘制4条轨迹。但当我尝试这样做时，我的网站遇到了一些奇怪的行为

有时，当我加载我的站点时，我没有收到任何错误，所有4条跟踪都完美地加载到我的3D图形中。但在另一个时间，并非所有轨迹都加载到图形中，我得到了错误：

Error: gd.data must be an array.

这是我从CSV文件添加跟踪的函数：

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图形的方式：

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文件中调用函数的方式：

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

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

print3DMultiGraphMain（'tester'，'out1.csv'）；
addTraceFromCSVlightColor（'tester'，'out2.csv'）；
addTraceFromCSVdarkColor（'tester'，'out3.csv'）；
addTraceFromCSVlightColor（'tester'，'out4.csv'）；

当包含图表的div没有数组类型的属性

data

时，将发生错误

gd.data必须是数组。
这可能是因为当您尝试添加跟踪时，图表尚未正确初始化，例如，如果您的异步
MultigraphMain
调用在一次
addTrace
调用后完成

为了避免这个问题，您必须在尝试添加跟踪之前等待图表的创建
Plotly.newPlot（）
返回承诺。我在下面附加了一个最小的展示


var trace1={
x:[1,2,3,4]，
y:[10,15,13,17]，
键入：“散布”
};
变量trace2={
x:[1,2,3,4]，
y:[16,5,11,9]，
键入：“散布”
};
功能睡眠（ms）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
异步函数getInitialData（）{
//模拟HTTP调用
等待睡眠（2000年）；
返回轨迹1；
}
getInitialData（）。然后（（跟踪）=>{
newPlot（'myPlot'，[trace]）。然后(
() => {
addTraces（'myPlot'，[trace2]）；
}
);		
})
//如果在这里调用addTraces，它将失败
//addTraces（'myPlot'，[trace2]）