2013-03-11 37 views
36

Tôi đang cố gắng tạo biểu đồ thời gian thực bằng cách sử dụng nvd3.js sẽ được cập nhật định kỳ và với lần hiển thị rằng dữ liệu được xử lý trong thời gian thực.Biểu đồ đường thời gian thực với nvd3.js

Hiện tại tôi có thể tạo một chức năng cập nhật biểu đồ định kỳ nhưng tôi không thể quản lý để có sự chuyển tiếp suôn sẻ giữa "trạng thái" như dòng đang chuyển đổi sang trái.

Here là những gì tôi đã sử dụng nvd3.js, đây mã thú vị là:

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

Bây giờ, tôi đã có thể sản xuất những gì tôi muốn sử dụng d3.js nhưng tôi muốn để có thể sử dụng tất cả các công cụ được cung cấp bởi nvd3.js. Here là những gì tôi muốn sản xuất sử dụng nvd3

Mã thú vị cho quá trình chuyển đổi sử dụng d3.js là:

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

} 

Trả lời

12

Bạn có thể muốn xem xét: D3 Real-Time streamgraph (Graph Data Visualization),

đặc biệt là liên kết của câu trả lời: http://bost.ocks.org/mike/path/

Nói chung, tôi thấy hai cách để giải quyết vấn đề chuyển tiếp theo chiều dọc:

  • oversampling có một số nội suy tuyến tính giữa điểm thực và khoảng thời gian giữa các điểm càng nhỏ, chuyển đổi dọc càng "ngang" càng nhiều (nhưng nhược điểm là bạn nhận được rất nhiều điểm "sai") có thể không được chấp nhận tùy thuộc vào việc sử dụng biểu đồ)
  • mở rộng biểu đồ bằng cách thêm vào cuối và dịch biểu đồ ở bên trái, đảm bảo phần bên trái vẫn còn hiển thị cho đến khi bạn xóa nó (cắt hoặc thực hiện bất kỳ mẹo nào khác), đó là tốt nhất và giải pháp được đề cập ở trên là
+0

Tôi đồng ý với tất cả những gì bạn nói. Tuy nhiên vấn đề của tôi là làm như vậy bằng cách sử dụng nvd3 thay vì d3. Liên kết đầu tiên trong câu hỏi của tôi cho thấy những gì tôi có bây giờ trong nvd3 và phần thứ hai cho thấy phiên bản làm việc đầy đủ mà tôi có với d3.js. Phương pháp thứ hai của bạn là phương pháp tôi sử dụng cho giải pháp d3. –

+0

ok, xấu của tôi ... giải pháp của bạn đã làm điều đó với d3 –

Các vấn đề liên quan