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();
}
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. –
ok, xấu của tôi ... giải pháp của bạn đã làm điều đó với d3 –