Wykres liniowy w czasie rzeczywistym z nvd3.js

Question

Próbuję utworzyć wykres w czasie rzeczywistym za pomocą nvd3.js, który byłby okresowo aktualizowany i miał wrażenie, że dane są przetwarzane w czasie rzeczywistym.

Na razie udało mi się stworzyć funkcję, która okresowo aktualizowałaby wykres, ale nie udaje mi się uzyskać płynnego przejścia między "stanami", takimi jak przejście w lewo.

Here co zrobiłem używając nvd3.js, tutaj kod jest interesujący:

d3.select('#chart svg') 
    .datum(data) 
    .transition().duration(duration) 
    .call(chart); 

Teraz byłem w stanie wyprodukować co chcę używając d3.js ale wolałbym, aby móc wykorzystaj wszystkie narzędzia dostarczone przez nvd3.js. Here co chciałbym produkować przy użyciu nvd3

Kod interesujący dla przejścia z wykorzystaniem d3.js jest:

function tick() { 

    // update the domains 
    now = new Date(); 
    x.domain([now - (n - 2) * duration, now - duration]); 
    y.domain([0, d3.max(data)]); 

    // push the accumulated count onto the back, and reset the count 
    data.push(Math.random()*10); 
    count = 0; 

    // redraw the line 
    svg.select(".line") 
     .attr("d", line) 
     .attr("transform", null); 

    // slide the x-axis left 
    axis.transition() 
     .duration(duration) 
     .ease("linear") 
     .call(x.axis); 

    // slide the line left 
    path.transition() 
     .duration(duration) 
     .ease("linear") 
     .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")") 
     .each("end", tick); 

    // pop the old data point off the front 
    data.shift(); 

} 

Answer 1

Prawdopodobnie chcesz spojrzeć na: D3 Real-Time streamgraph (Graph Data Visualization),

szczególnie link odpowiedzi: http://bost.ocks.org/mike/path/

Ogólnie widzę dwa sposoby radzenia sobie z problemem przejścia wertykalnego:

• oversampling posiadające niektóre liniową interpolację pomiędzy rzeczywistym punkcie, a mniejszy interwał między punktami, tym bardziej „poziome” przejście pionowe będzie wyglądać (ale wadą jest to, że można dostać dużo punktów „false”, może być niedopuszczalne w zależności od użycia wykresu)
• rozszerzyć wykres dodając na końcu i przetłumaczyć wykres po lewej stronie, upewniając się, że nadal dostępna lewa część nie jest wyświetlana, dopóki jej nie usuniesz (przycinając lub robienie jakiejkolwiek innej sztuczki), to jest najlepsze, a rozwiązanie wspomniane powyżej robi, że