D3 Real-Time streamgraph (Graph Data Visualization) [zamknięty]

Chciałbym Wykres strumienia jak w tym przykładzie: http://mbostock.github.com/d3/ex/stream.html

Tutaj wpisz opis obrazka

Ale chciałbym wprowadzić dane w czasie rzeczywistym z prawej strony i mieć stare dane zostawić z lewej, tak, że zawsze mam Okno 200 próbek. Jak mam to zrobić tak, że mam odpowiednie przejścia?

Próbowałem zmienić punkty danych w tablicy a, a następnie odtworzyć obszar jako taki 

  data0 = d3.layout.stack()(a);

Ale moje przejścia nie sprawiają, że wygląda na to, że wykres przesuwa się po ekranie.

Z góry dzięki.
Author: VividD, 2012-03-12
Source

2 answers

Spróbuj ten tutorial :

Podczas implementacji wyświetlania w czasie rzeczywistym danych szeregów czasowych, często używamy osi x do kodowania czasu jako pozycji: w miarę postępu czasu nowe dane przychodzą z prawej strony, a stare dane wysuwają się z lewej. Jeśli jednak używasz wbudowanych interpolatorów ścieżki D3 , możesz zauważyć zaskakujące zachowanie...

Aby wyeliminować ruch, Interpoluj transformację, a nie ścieżkę. To ma sens, jeśli myślisz o wykres jako wizualizacja funkcji - jej wartość nie zmienia się, pokazujemy tylko inną część domeny. Przesuwając widoczne okno w takim samym tempie, w jakim pojawiają się nowe dane, możemy płynnie wyświetlać dane w czasie rzeczywistym...

 35
Author: mbostock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-05 06:31:07

Oto prosty przykład: http://jsfiddle.net/cqDA9/1 / Pokazuje możliwe rozwiązanie do śledzenia i aktualizowania różnych serii danych.

var update = function () {
    for (Name in chart.chartSeries) {
        chart.chartSeries[Name] = Math.random() * 10;
    }
    for (Name in chart2.chartSeries) {
        chart2.chartSeries[Name] = Math.random() * 10;
    }
    setTimeout(update, 1000);
}
setTimeout(update, 1000);
 7
Author: Jerm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-07 01:28:22