d3.js - chuyển đổi & chuyển đổi, nhiều dòng

Question

Tôi đã làm theo hướng dẫn tại: http://bost.ocks.org/mike/path/ để tạo và tạo hoạt ảnh cho các biểu đồ đơn với các dòng đơn.

Và, đã tìm ra cách để tạo ra nhiều dòng trong một đồ thị: Drawing Multiple Lines in D3.js

Issue chính: Tôi gặp một thời gian khó khăn chuyển nhiều dòng sau khi tôi chuyển & đẩy trong dữ liệu mới vào mảng dữ liệu của tôi.

tôi tạo N dòng với: (thời gian: thời gian kỷ nguyên, bước về phía trước)

var seriesData = [[{time:1335972631000, value:23}, {time:1335972631500, value:42},...], 
        [{time:1335972631000, value:45}, {time:1335972631500, value:13},...], 
        [{time:1335972631000, value:33}, {time:1335972631500, value:23},...}], 
        [...],[...],... 
        ]; 

var seriesColors = ['red', 'green', 'blue',...]; 

line = d3.svg.line() 
     .interpolate(interpolation) 
     .x(function(d) { return x(d.time); }) 
     .y(function(d) { return y(d.value); }); 

graphGroup.selectAll(".line") 
     .data(seriesData) 
      .enter().append("path") 
      .attr("class", "line") 
      .attr("d", line) 
      .style('stroke', function(d, i) { return seriesColors[i]; }) 
      .style('stroke-width', 1) 
      .style('fill', 'none'); 

Và đang cố gắng để cập nhật N dòng với javascript setInterval (...) gọi một phương thức với:

graph.selectAll("path") 
    .data(seriesData) 
    .attr("transform", "translate(" + x(1) + ")") 
    .attr("d", line) 
     .transition() 
    .ease("linear") 
    .duration(transitionDelay) 
    .attr("transform", "translate(" + x(0) + ")"); 

Nó có thể vẽ thiết lập ban đầu một cách hoàn hảo, nhưng ngay sau khi tôi cập nhật ăn mảng dữ liệu, các dòng chỉ biến mất.

---

CẬP NHẬT 01

tôi nhận ra rằng tôi đang sử dụng giá trị thời gian thời điểm vào x (Xaxis cho thấy ngày: thời gian) làm ví dụ của tôi có lẽ sẽ làm việc nếu tôi sử dụng seriesData minh họa ở trên.

Vấn đề là "chuyển đổi", "dịch" bằng cách sử dụng x (1), x (0) đã trả về số lượng lớn, cách lớn hơn so với đồ thị của tôi cần được chuyển đổi.

Tôi đổi cập nhậtN phương pháp dòng (ở trên) để sử dụng một phương pháp thủ công:

Issue mới: Bây giờ di chuyển đồ thị để lại một cách chính xác, nhưng theo dòng/graph pops quay lại bên phải, mỗi cập nhật setInterval thực hiện.

Đó là đẩy/thay đổi chuỗi chuỗiData chính xác nhưng không tiếp tục cuộn sang trái để hiển thị dữ liệu mới thực sự đang được vẽ.

graph.selectAll("path") 
     .data(seriesData) 
     .attr("d", line) 
     .attr("transform", null) 
      .transition() 
     .ease("linear") 
     .duration(2000) 
     .attr("transform", "translate(-200)"); 

Một tài liệu tham khảo mà tôi đã sử dụng là: http://bl.ocks.org/1148374

Bất kỳ suy nghĩ?

Answer 1

Một điều mà nhảy ra lúc tôi như một khả năng cho lỗi là các cuộc gọi dữ liệu được sử dụng, ban đầu là

.data(seriesData) 

cập nhật sử dụng

.data([seriesData]) 

mà có thể gây ra vấn đề này, nhưng khó mà nói mà không thấy phần còn lại của những gì đang diễn ra, bạn có thể đặt nó trên jsfiddle không?