Big d3.js wykres, płótno lub renderowanie po stronie serwera?

Używam d3.js do wizualizacji timeseries-danych wysłanych z mojego zaplecza python (przez Websocket). Zwykła ilość danych dla jednego wykresu wynosi około 120 wpisów (2 godziny danych, 1 wpis na minutę). To działa dobrze, aktualizuje się co minutę.Big d3.js wykres, płótno lub renderowanie po stronie serwera?

Powinna również być w stanie wizualizować dane z miesiąca lub więcej (może to być nawet rok), również w odstępach 1-minutowych. Renderowanie takiej ilości danych jest zbyt duże dla SVG.

myślę o następujących alternatyw:

czynią je w płótna. Czy to naprawdę jest o wiele szybsze?
Przejście do innej biblioteki, takiej jak Highchart.js (zobaczyłem wersję demonstracyjną z wpisami ~ 50k)
Rendering SVG/JPG/PNG na serwerze. Dowolne doświadczenie w renderowaniu serwera d3.js po stronie z np. phantom.js? Chciałbym ponownie wykorzystać już napisane modele graficzne. Ale może to być również dowolna inna biblioteka, która jest w stanie renderować dane (generować wykresy za pomocą pythona).

Co byś polecił?

Źródło

2013-07-01 Beastcraft

Chciałbym argumentować, aby przejść z super cool [rendering SVG plików na kliencie] (http://net.tutsplus.com/tutorials/why-arent-you-using-svg/) podejście. – Droogans

@Droogany Tak, już robię to dla małych wykresów. Ale moje problemy to duże wykresy (z ogromną ilością danych). – Beastcraft

Hmmm ... d3 powinien działać dobrze z 120 punktami danych. Jakie problemy masz z rozwiązaniem d3? Canvas świetnie prezentuje wykresy zmieniające się z sekundy na sekundę - tak, jest to bardzo szybkie. Ale nie jest silny w zakresie interaktywności (jak drążenia w dół lub wyskakujące notatki informacyjne). Jeśli masz tabele statyczne do zaprezentowania (wykresy, które zostały zapisane na obrazie), płótno może zostać rozpoczęte od przedstawienia statycznego obrazu wewnątrz płótna, a następnie aktualizacji płótna zgodnie ze zaktualizowanymi punktami danych (wspomnianą wielokrotnością użycia). – markE

Należy zauważyć, że d3 obsługuje używanie javascriptowej wersji buffered arrays. Wykresy SVG z tysiącami punktów danych szeregów czasowych sprawdziły się w moim odczuciu (nawet przy wielu źródłach transmisji danych na żywo z aktualizacjami 20 ms za pośrednictwem stron internetowych).

Na przykład, jeśli spakujesz wszystkie swoje dane w Pythonie; może nie trzeba to zrobić w żywej widzenia jako swoją szybkość aktualizacji jest stosunkowo powolny:

import struct 
# fake data point 
p = [56435367, 200, 1] 
# <=little endian, d=float64 (for time), d=float64 
msg_str = struct.pack('<' + 'd' * len(p), *p) 
print(msg_str) 
b'\x00\x00\x008\x15\xe9\x8aA\x00\x00\x00\x00\x00\[email protected]\x00\x00\x00\x00\x00\x00\xf0?'

Następnie za pośrednictwem websocket, który dostaje się do JavaScript, gdzie można zrobić coś takiego:

this.ws.onmessage = function(e){ 
    // Just pump the raw bytes straight into CircularBuffer 
    graph.databuffer.push(e.data); 
    ...

I jeśli chcesz wykreślić, zakładając g to odniesienie do SVG D3:

// Get a Float64Array containing all the values 
var series_data = graph.databuffer.get_array_stream(); 
g.attr("d", graph.line(d3.zip(time, series_data)));

Oczywiście powinno to być nawet łatwiejsze, jeśli masz, gdy wszystkie wstępne dane. Czy jesteś może wykreślając punkty zamiast jednej ścieżki? Zauważyłem, że przeglądarki zmagają się z wykreślaniem dziesiątek tysięcy pojedynczych okręgów (zwłaszcza, jeśli wszystkie poruszają się co 20 ms!), Ale potrafią bardzo łatwo obsłużyć ścieżkę.

Źródło

2013-07-30 01:37:24 Hardbyte

Big d3.js wykres, płótno lub renderowanie po stronie serwera?

Odpowiedz

Powiązane problemy