Biểu đồ lớn d3.js, canvas hoặc hiển thị phía máy chủ?

Question

Tôi đang sử dụng d3.js để trực quan hóa thời gian-dữ liệu được gửi từ chương trình phụ trợ trăn của tôi (qua Websocket). Số lượng dữ liệu thông thường cho một biểu đồ là khoảng 120 mục (2 giờ dữ liệu, 1 mục nhập mỗi phút). Điều này đang chạy tốt, được cập nhật mỗi phút.

Nhưng nó cũng phải có khả năng hiển thị dữ liệu từ một tháng trở lên (có thể lên đến một năm), cũng trong khoảng thời gian 1 phút. Hiển thị số lượng dữ liệu quá lớn đối với SVG.

Tôi đang nghĩ đến việc lựa chọn thay thế sau:

• Rendering nó trong một canvas. Có thực sự nhanh hơn nhiều không?
• Chuyển sang thư viện khác như Highchart.js (Đã xem bản trình diễn có ~ 50 nghìn mục nhập)
• Hiển thị SVG/JPG/PNG trên máy chủ. Bất kỳ trải nghiệm nào về việc hiển thị phía máy chủ d3.js với ví dụ: phantom.js? Tôi muốn sử dụng lại các mô hình đồ thị đã viết. Nhưng nó cũng có thể là bất kỳ thư viện nào khác có thể hiển thị dữ liệu (tạo biểu đồ bằng python)

Bạn sẽ đề xuất điều gì?

Answer 1

Lưu ý rằng d3 hỗ trợ sử dụng javascript buffered arrays. SVG lô với hàng ngàn điểm dữ liệu chuỗi thời gian đã làm việc tốt trong kinh nghiệm của tôi (ngay cả với nhiều nguồn dữ liệu trực tiếp tại 20ms cập nhật thông qua websockets).

Ví dụ: nếu bạn gói tất cả dữ liệu của mình bằng Python; bạn có thể không cần phải làm điều này theo quan điểm sống của bạn như tốc độ cập nhật của bạn là tương đối chậm:

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\x00i@\x00\x00\x00\x00\x00\x00\xf0?' 

Sau đó qua WebSocket của bạn mà được để javascript, nơi bạn có thể làm điều gì đó như:

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

Và khi bạn muốn vẽ đồ thị, giả sử g là tham chiếu của bạn đến số 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))); 

Điều này sẽ dễ dàng hơn nếu bạn có tất cả dữ liệu trả trước. Bạn có thể vẽ điểm thay vì một con đường không? Tôi đã tìm thấy các trình duyệt đấu tranh với âm mưu hàng chục ngàn vòng tròn riêng lẻ (đặc biệt là nếu tất cả chúng di chuyển mỗi 20ms!) Nhưng chúng có thể xử lý một con đường rất dễ dàng.