Có bất kỳ hướng dẫn hoặc ví dụ nào cho cubism.js + WebSocket không?

Question

Có hướng dẫn cụ thể nào về kết nối WebSockets (hoặc nguồn dữ liệu không bỏ phiếu khác) và cubism.js không?

Cụ thể, tôi muốn có thể tạo biểu đồ dữ liệu trực tuyến thời gian thực từ máy chủ, trực quan tương tự như ví dụ trên cubism page.

Tài liệu tham khảo: - https://github.com/square/cubism/issues/5 - http://xaranke.github.io/articles/cubism-intro/ - Using Other Data Sources for cubism.js

Answer 1

Đây là điều mà tôi đang đùa giỡn với. Nó không có thẩm quyền nhưng dường như hoạt động: https://gist.github.com/cuadue/6427101

Khi dữ liệu đến từ trang web, hãy đặt nó vào bộ đệm. Bơm callbacks (tôi sẽ giải thích những người dưới đây), gửi bộ đệm làm đối số. Kiểm tra mã trả lại cho "thành công" hoặc "chờ thêm dữ liệu". Thành công có nghĩa là dữ liệu đã được gửi đến hình khối và chúng tôi có thể xóa cuộc gọi lại này.

Khi chủ nghĩa lập phương yêu cầu một khung dữ liệu, hãy thiết lập một cuộc gọi lại để kiểm tra xem điểm cuối cùng trong bộ đệm có phải là sau khi hình khối cuối cùng được yêu cầu hay không. Nếu không, hãy đợi thêm dữ liệu.

Nếu có dữ liệu để bao gồm điểm dừng của khung được yêu cầu, chúng tôi sẽ đáp ứng yêu cầu này. Không có API để yêu cầu lịch sử, chúng tôi phải xóa dữ liệu đi vào quá khứ.

Sau đó, chỉ nội suy bộ đệm vào kích thước bước khối lập phương.

Dường như hình khối lập phương yêu cầu dữ liệu từ cùng một thời điểm nhiều lần, do đó, tùy bạn làm cách nào để tỉa bộ đệm của bạn. Tôi không nghĩ sẽ an toàn khi chỉ thả tất cả dữ liệu sớm hơn thời gian bắt đầu được yêu cầu.

Answer 2

tôi đã làm một hack nhanh chóng và dơ bẩn:

• WebSocket điền vào một mảng realTimeData
• Cubism không lấy ban đầu từ một số dịch vụ Web, sau đó kéo từ realTimeData mảng

 

    var firstTime = true; 
    context.metric(function(start, stop, step, callback) { 
     if (firstTime) { 
     firstTime = false; 
     d3.json("... { 
      var historicalData = []; 
      callback(null, historicalData); 
     } 
     } else { 
     callback(null, realTimeData); 
     } 
 

Lưu ý rằng cubism.js dự kiến ​​6 điểm cho mỗi lần tìm nạp (cubism_metricOverlap) vì vậy hãy đảm bảo giữ 6 điểm trong realTimeData