javascript - Plotly.js - gd.data 必须是一个数组

Question

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

有时，当我加载网站时，我没有收到任何错误，并且所有 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>

Answer 1

当包含图表的 div 不具有数组类型的属性 data 时，将会发生错误 gd.data 必须是数组。 这可能是因为当您尝试添加轨迹时，图表尚未正确初始化，例如如果您的异步 MultigraphMain 调用在您的一个 addTrace 调用之后完成。

为了避免这个问题，您必须等待图表创建后再尝试添加跟踪。 Plotly.newPlot() 返回一个 promise 。我在下面附上了一个最小的展示。

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>