Effiziente Continuous Scrolling Graph mit SVG HTML CSS

Question

Ich habe eine Echtzeit-Grafik erstellt, wo neue Datenpunkte kontinuierlich eingespeist und geplottet werden.

Derzeit verwende ich requestAnimationFame(), wo ich die aktualisierte Positionen der Elemente 30 Mal pro Sekunde rendern.

Bei vielen SVG-Elementen kann dies etwas langsam werden.

Was ist der effizienteste Weg, um ein kontinuierlich scrollendes Diagramm wie dieses mit SVG-Animationen, CSS-Animationen oder CSS-Übergängen zu implementieren. (Ohne Bibliotheken von Drittanbietern).

Vielen Dank im Voraus.

Answer 1

Hier ist eine ziemlich gute Lösung in einem Fiddle.

Es ist von Mike Bostock und sein tolles Tutorial zur Verwendung D3. In diesem Tutorial; Mike erklärt, wie der Fiddle von Grund auf neu zu erreichen, aber der wichtige Teil ist für Sie die redraw Funktion:

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(); 

} 

Es wird eine neue rect basierend auf eingehenden Daten hinzufügen und die älteste rect verblassen, und so erzeugt die gewünschte Scrollen Aktion. Dies sollte ziemlich einfach an Ihre Bedürfnisse angepasst werden, aber es wird eine bestimmte Menge an Rezepten angenommen.

Es scheint, dass Sie möglicherweise eine unbegrenzte Menge von Rekten auf dem Bildschirm zu einem bestimmten Zeitpunkt aus Ihrer Frage haben möchten, aber letztlich ist dies nicht wünschenswert. Sie können die Anzahl der anzuzeigenden Rezkte auf die größte Menge festlegen, die Ihrer Site immer noch erlaubt, performant zu sein. Mehr und es wird für Sie und Ihre Benutzer abstürzen. Ein Fading nach außen zu verblassen ist effizienter als das fortlaufende Laden, sobald der Svg-Wert hoch genug ist.