Eksik değerler içeren çoklu seri tablosu (D3)

Question

Bu example ürününe göre D3 ile çoklu seri çizgi grafiği oluşturmak istiyorum. Benim sorunum, bazı değerler olduğuna eksik:

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 

aşağıdaki grafiği elde etmek istiyorum: yeni başladığım veya sonunda

Eksik noktalarını bırakılmalıdır. Bazı noktaları bir çizgi içinde eksikse

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

ile Ama, hat kesintiye uğramaması gerektiğini elde edebiliriz. Yeşil çizgi (x1) üzerindeki kod y = 3'te durur ve y = 5'de devam eder. Ama ben bu noktaları birbirine bağlamak istiyorum.

line().defined() kullanılmadan, tüm eksik noktalar değeri 0 olarak ele alındı. Beni geçirmeden önce veri dizisinde eksik noktaları yerine hiçbir çözüm olduğunu düşünüyorum

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

: Burada

kodudur, ben bu özelliği uygulamak için bir yol bulmak için kullanılan grafiklerim işlevi, çünkü değerleri bir lejantta ve araç ipuçlarında göstermek zorundayım ve burada hesaplanmış değerleri gösteremiyorum. Örneğin, eğer fare ile y = 4 üzerinden hareket edersem, efsanede x1:-- x2:1.1 x3:0.8 görünmelidir (x1 burada herhangi bir değere sahip değildir). Ayrıca (gerçek) noktalar daire olarak gösterilmelidir. Ayrıca bellekte iki veri tablosu (gerçek ölçüm verileri ve grafik çizgilerinin artırılmış verileriyle bir saniye) almak istemiyorum.

Answer 1

Bunu çözebilirdim, ancak veri güncelleştirmelerini bu şekilde geçişlerle halledebilir miyim emin değilim. Veri biraz biçimlendirmek ve şimdi ayrı ayrı her satırı çiziyorum değiştirdi:

http://jsfiddle.net/G5z4N/3/ eğer ortada değil onun eksik değer bağlanacak takdirde satır bağlanacak istediğiniz kısmı için

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