Question

我正在尝试评估Plotly是否适合我的需求（具有〜250.000点的3D表面/散点图，每〜50ms会更新500个新点）。

由于我没有找到任何3D实时图表示例，因此我尝试了2D示例中使用的update / extendtraces方法。使用update（）可以正常运行，但似乎速度很慢，而且由于每次更新似乎都会重新绘制整个图，因此我无法绕行。
有什么方法可以加快这个过程吗？

这是我的代码，底部有更新功能：

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function (err, rows) {
    function unpack(rows, key) {
        return rows.map(function (row) {
            return row[key];
        });
    }

    var z_data = [];
    for (i = 0; i < 24; i++)
    {
        z_data.push(unpack(rows, i));
    }

    var data = [{
            z: z_data,
            type: 'surface'
        }];

    var layout = {
        title: 'Performance-Test',
        autosize: true,
//                    width: 1920,
//                    height: 1080,
        margin: {
            l: 50,
            r: 50,
            b: 65,
            t: 90
        }
    };
    Plotly.newPlot('myDiv', data, layout);
    Plotly.relayout('myDiv', 'scene.zaxis.range', [0, 500]);
    Plotly.relayout('myDiv', 'scene.xaxis.range', [0, 500]);
    Plotly.relayout('myDiv', 'scene.yaxis.range', [0, 500]);

    setInterval(function () {
        addValue();
//                    document.getElementById('cmax').innerHTML = 'Max: ' + data[0].cmax;
//                    document.getElementById('cmin').innerHTML = 'Min: ' + data[0].cmin;
//                    Plotly.extendTraces('myDiv', z_data[0], [0]);
//                    Plotly.addTraces('myDiv', z_data[0], [0]);
        Plotly.update('myDiv', data, layout);
    }, 40);

    function addValue() {
        var sample = [];
        for (i = 0; i < 500; i++) {
            sample.push(Math.floor(Math.random() * 100));
        }
        z_data.push(sample);

        if (z_data.length > 500) {
            z_data.shift();
        }
    }
});

绘制3D实时图表

0 个答案: