Grafico di scorrimento continuo efficiente con CSS SVG HTML

Question

Ho creato un grafico in tempo reale in cui nuovi punti dati vengono continuamente inseriti e tracciati.

Attualmente sto usando requestAnimationFame() dove rendo le posizioni aggiornate degli elementi 30 volte al secondo.

Con molti elementi SVG, questo può essere un po 'lento.

Qual è il modo più efficiente per implementare un grafico a scorrimento continuo come questo con animazioni SVG, animazioni CSS o transizioni CSS. (Senza librerie di terze parti).

Grazie in anticipo.

Answer 1

Ecco una soluzione piuttosto buona in un Fiddle.

È di Mike Bostock e del suo fantastico tutorial sull'uso di D3. In quel tutorial; Mike spiega come realizzare il violino da zero, ma la parte importante per voi è la funzione redraw:

function redraw() { 

    var rect = chart.selectAll("rect") 
     .data(data, function (d) { 
     return d.time; 
    }); 

    rect.enter().insert("rect", "line") 
     .attr("x", function (d, i) { 
     return x(i + 1) - .5; 
    }) 
     .attr("y", function (d) { 
     return h - y(d.value) - .5; 
    }) 
     .attr("width", w) 
     .attr("height", function (d) { 
     return y(d.value); 
    }) 
     .transition() 
     .duration(1000) 
     .attr("x", function (d, i) { 
     return x(i) - .5; 
    }); 

    rect.transition() 
     .duration(1000) 
     .attr("x", function (d, i) { 
     return x(i) - .5; 
    }); 

    rect.exit().transition() 
     .duration(1000) 
     .attr("x", function (d, i) { 
     return x(i - 1) - .5; 
    }) 
     .remove(); 

} 

si aggiunge un nuovo rettangolo sulla base dei dati in entrata e in dissolvenza la più antica rect fuori, e così crea il tuo scorrimento desiderato azione. Questo dovrebbe essere abbastanza facile da adattare alle tue esigenze ma presuppone una quantità fissa di rects.

Sembra che potresti desiderare di avere una quantità illimitata di rects sullo schermo in qualsiasi momento dalla tua domanda, ma alla fine questo non è desiderabile. È possibile impostare la quantità di rects da visualizzare alla massima quantità che consente comunque al tuo sito di essere performante. Più e si romperà per te e per i tuoi utenti. Dissolvenza di uno in quanto Fades out è più efficiente del caricamento continuo una volta che il numero svg diventa abbastanza alto.