D3 Real-Time streamgraph (Graph Data Visualization)

Question

Tôi muốn một đồ thị dòng như trong ví dụ này: http://mbostock.github.com/d3/ex/stream.html

nhưng tôi muốn dữ liệu thời gian thực vào từ cánh phải và có dữ liệu cũ rời khỏi bên trái, sao cho tôi luôn có cửa sổ 200 mẫu. Làm thế nào tôi có thể làm điều này sao cho tôi có sự chuyển tiếp thích hợp?

tôi đã cố gắng thay đổi các điểm dữ liệu trong mảng a và sau đó tái tạo một khu vực như vậy

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

nhưng hiệu ứng chuyển tiếp của tôi không làm cho nó trông giống như biểu đồ được trượt trên màn hình.

Xin cảm ơn trước.

Answer 1

Hãy thử this tutorial:

Khi thực hiện hiển thị thời gian thực của dữ liệu chuỗi thời gian, chúng ta thường sử dụng trục x để mã hóa thời gian như vị trí: theo thời gian, dữ liệu mới xuất phát ở cánh phải, và cũ dữ liệu trượt sang bên trái. Nếu bạn sử dụng built-in path interpolators, tuy nhiên, bạn có thể thấy một số hành vi đáng ngạc nhiên D3 của ...

Để loại bỏ lung, suy biến đổi chứ không phải là con đường. Điều này có ý nghĩa nếu bạn nghĩ biểu đồ là hình dung chức năng — giá trị của nó không thay đổi, chúng tôi chỉ hiển thị một phần khác của miền. Bằng cách trượt cửa sổ có thể nhìn thấy ở mức tương tự rằng dữ liệu mới đến, chúng tôi liên tục có thể hiển thị dữ liệu thời gian thực ...

Answer 2

Dưới đây là một ví dụ đơn giản: http://jsfiddle.net/cqDA9/1/ Nó cho thấy một giải pháp khả thi để theo dõi và cập nhật khác nhau chuỗi dữ liệu.

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