javascript - Yavaş render süresi | Typescript React ile Plotly

Bir büyük veri setini plotly ile görselleştirmeye çalışıyorum. Sıcaklık ve derinlik çizgisini çiziyorum. Veri noktası sayısı ~100.000 olduğunda kullanılmaz derecede yavaş. Ancak ~85.000 nokta olduğunda sorunsuz çalışıyor.

Bunun bu kadar garip olmasının nedeni, yaklaşık 85.000 noktaya sahip 4 satırın hala çok hızlı çalışmasıdır. Çok daha fazla veri çizilmesine rağmen.

Böyle bir performans farkı neden var?

Özet: Yaklaşık 85.000 puanlı 4 hat sahibi olmak, yaklaşık 100.000 puanlı 2 hat sahibi olmaktan önemli ölçüde daha hızlıdır.

İşte bunu test etmek için bir deneme alanı. Ne demek istediğimi görmek için artımı 0.07'den 0.06'ya değiştirmeyi deneyin. Sadece 1 veya 2 çizgi çiziyor olsanız bile hala yavaş.
https://stackblitz.com/edit/react-ts-4fteps?file=index.tsx

import { Col } from 'react-bootstrap';
import Plot from 'react-plotly.js';
import { useState, useEffect } from 'react';

const LinePlot: React.FC = () => {
    const [depthDataPoints, setDepthDataPoints] = useState<number[]>([]);
    const [temperatureDataPoints, setTemperatureDataPoints] = useState<number[]>([]);
    
    const [depthDataPoints2, setDepthDataPoints2] = useState<number[]>([]);
    const [temperatureDataPoints2, setTemperatureDataPoints2] = useState<number[]>([]);

    useEffect(() => {
        // Generate data points for the depth line (0 to 6000 at every 0.01 increment)
        const increment = 0.07;
        const depthPoints = Array.from({ length: Math.ceil(6000 / increment) + 1 }, (_, i) => i * increment);
        setDepthDataPoints(depthPoints);
        setDepthDataPoints2(depthDataPoints.map(y => y * 0.5))

        // Generate data points for the temperature line (fluctuating from 102 F to 165 F)
        const temperaturePoints = depthPoints.map(() => 102 + Math.random() * (165 - 102));
        setTemperatureDataPoints(temperaturePoints);
        setTemperatureDataPoints2(temperatureDataPoints.map(y => y * 2));
    }, []);

    return (
        <Col sm={10}>
            <Plot
                data={[
                    {
                        x: depthDataPoints,
                        y: depthDataPoints,
                        type: 'scattergl',
                        mode: 'lines',
                        name: 'Depth (ft)',
                        line: { color: 'blue' },
                    },
                    {
                        x: depthDataPoints,
                        y: temperatureDataPoints,
                        type: 'scattergl',
                        mode: 'lines',
                        name: 'Temperature (°F)',
                        line: { color: 'red' },
                    },
                    {
                        x: depthDataPoints,
                        y: depthDataPoints2,
                        type: 'scattergl',
                        mode: 'lines',
                        name: 'Depth 2 (ft)',
                        line: { color: 'green' },
                    },
                    {
                        x: depthDataPoints,
                        y: temperatureDataPoints2,
                        type: 'scattergl',
                        mode: 'lines',
                        name: 'Temperature 2 (°F)',
                        line: { color: 'orange' },
                    },
                ]}
                layout={{
                    title: 'Depth and Temperature Plot',
                    xaxis: { title: 'Depth (ft)', range: [0, 6000] },
                    yaxis: { title: 'Measurement', autorange: true },
                    autosize: true,
                }}
                useResizeHandler={true}
                style={{ width: '100%' }}
                config={{ responsive: true }}
            />
        </Col>
    );
};

export default LinePlot;

Cevap #1

Ne kadar garip gelse de, type: 'scattergl' yerine type: 'scatter' kullanıldığında düzgün çalışıyor, oysa scattergl birçok veri noktasına sahip olduğunda daha hızlı olması gerekiyor.

mode değerini 'lines'dan 'markers'a değiştirmek aynı davranışı üretir.

Bu performans farkı muhtemelen scattergl uygulamasındaki bir hatadan kaynaklanıyor. Bu konuyu yeniden açmak isteyebilirsiniz.