Schemat wielu serii (D3) z brakującymi wartościami

Question

Chcę utworzyć wykres liniowy z wieloma seriami z D3 na podstawie tego example. Moim problemem jest to, że niektóre wartości są brakuje:

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 

Chcę uzyskać następujący wykres:

Brakujące punkty na beginnig lub na końcu powinna być pominięta. Mogę to osiągnąć dzięki

Jeśli jednak w linii brakuje niektórych punktów, linia nie powinna być przerywana. Z powyższym kodem zielona linia (x1) zatrzymuje się na y = 3 i trwa na y = 5. Ale chcę mieć te punkty połączone.

Bez użycia line().defined(), wszystkie brakujące punkty były traktowane tak, jakby ich wartość wynosiła 0.

Oto kod, kiedyś znaleźć sposób, aby wdrożyć tę funkcję:

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

myślę, że to nie jest rozwiązanie dla mnie, aby zastąpić brakujące punkty w tablicy danych przed przekazaniem go do moja funkcja wykresów, ponieważ muszę pokazywać wartości w legendzie i etykietkach narzędzi i nie mogę tutaj wyświetlać obliczonych wartości. Na przykład, jeśli poruszę się myszą przez y = 4, w legendzie powinien pojawić się x1:-- x2:1.1 x3:0.8 (x1 nie ma tu żadnej wartości). Również (rzeczywiste) punkty powinny być wyświetlane jako kółka. Nie chcę również mieć dwóch tabel danych w pamięci (jedna z rzeczywistymi danymi pomiarowymi, a druga z rozszerzonymi danymi dla linii wykresu).

Answer 1

Mogłabym go rozwiązać, ale nie jestem pewien, czy w ten sposób poradzę sobie z aktualizacjami danych z przejściami. Zmieniłem dane formatowania trochę i jestem rysunek każdą linię osobno teraz:

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