Biểu đồ nhiều chuỗi (D3) có giá trị bị thiếu

Question

Tôi muốn tạo biểu đồ đường nhiều hàng với D3 dựa trên example này. Vấn đề của tôi là, rằng một số các giá trị là mất tích:

y x1 x2 x3 
1 0.8  0.7 
2 0.9  0.7 
3 0.9 1.2 0.7 
4  1.1 0.7 
5 0.8 1.1 2.7 
6 0.9 1.2 2.6 
7  1.3 0.8 

Tôi muốn để có được biểu đồ sau:

điểm Thiếu tại beginnig hoặc kết thúc nên bị gạt ra ngoài. Tôi có thể đạt được điều đó với

d3.svg.line().defined(function (d) { return d.value; } 

Nhưng nếu một số điểm bị thiếu trong một dòng thì dòng đó sẽ không bị gián đoạn. Với mã trên dòng màu xanh lá cây (x1) dừng tại y = 3 và tiếp tục tại y = 5. Nhưng tôi muốn có những điểm kết nối.

Nếu không sử dụng line().defined(), tất cả các điểm bị thiếu được xử lý như thể giá trị của chúng là 0.

Đây là đoạn mã, tôi sử dụng để tìm một cách để thực hiện tính năng đó:

http://jsfiddle.net/G5z4N/2/

Tôi nghĩ rằng đó là không có giải pháp cho tôi để thay thế các điểm còn thiếu trong các mảng dữ liệu trước khi đi qua nó để các biểu đồ của tôi hoạt động, bởi vì tôi phải hiển thị các giá trị trong một chú giải và trong các chú giải công cụ và tôi không thể hiển thị các giá trị được tính toán ở đây. Vì vậy, ví dụ nếu tôi di chuyển bằng chuột trên y = 4, sẽ xuất hiện x1:-- x2:1.1 x3:0.8 trong chú giải (x1 không có bất kỳ giá trị nào ở đây). Ngoài ra, các điểm (thực) sẽ được hiển thị dưới dạng vòng kết nối. Tôi cũng không muốn có hai bảng dữ liệu trong bộ nhớ (một với dữ liệu đo lường thực và một giây với dữ liệu được tăng cường cho các dòng biểu đồ).

Answer 1

Tôi có thể giải quyết nó, nhưng tôi không chắc liệu mình có thể xử lý cập nhật dữ liệu theo cách này với chuyển tiếp hay không. Tôi đã thay đổi dữ liệu định dạng một chút và đang vẽ mỗi dòng riêng bây giờ:

http://jsfiddle.net/G5z4N/3/

var data = [ 
    { 
     name: "x1", 
     color: "green", 
     data: [ 
      [1, 0.8], 
      [2, 0.9], 
      [3, 0.9], 
      [5, 0.8], 
      [6, 0.9] 
     ] 
    }, 
    { 
     name: "x2", 
     color: "red", 
     data: [ 
      [3, 1.2], 
      [4, 1.1], 
      [5, 1.1], 
      [6, 1.2], 
      [7, 1.3] 
     ] 
    }, 
    { 
     name: "x3", 
     color: "blue", 
     data: [ 
      [1, 0.7], 
      [2, 0.7], 
      [3, 0.7], 
      [4, 0.7], 
      [5, 2.7], 
      [6, 2.6], 
      [7, 0.8] 
     ] 
    }, 
]; 

var margin = [20, 20, 20, 20]; 
var w = 400 - margin[1] - margin[3]; 
var h = 300 - margin[0] - margin[2]; 

var x = d3.time.scale().range([0, w]); 
var y = d3.scale.linear().range([h, 0]); 
var lineFunction = d3.svg.line() 
    .x(function(d) { return x(d[0]); }) 
    .y(function(d) { return y(d[1]); }); 

graph = d3.select('#line') 
    .append("svg:svg") 
     .attr("class", "line-graph") 
     .attr("width", w + margin[1] + margin[3]) 
     .attr("height", h + margin[0] + margin[2]) 
    .append("svg:g") 
     .attr("transform", "translate(" + margin[3] + "," + margin[0] + ")"); 

x.domain([ 
    d3.min(data, function(c) { return d3.min(c.data, function(v) { return v[0]; }); }), 
    d3.max(data, function(c) { return d3.max(c.data, function(v) { return v[0]; }); }) 
]); 

y.domain([ 
    d3.min(data, function(c) { return d3.min(c.data, function(v) { return +v[1]; }); }), 
    d3.max(data, function(c) { return d3.max(c.data, function(v) { return +v[1]; }); }) 
]); 

var linesGroup = graph 
    .append("svg:g") 
     .attr("class", "lines"); 

var linedata; 
for (var i in data) { 
    linedata = data[i]; 
    linesGroup 
     .append("path") 
      .attr("d", lineFunction(linedata.data)) 
      .attr("class", "line") 
      .attr("fill", "none") 
      .attr("stroke", function(d, i) { 
       console.log(linedata.color); 
       return linedata.color; 
      }); 
};