Passa valori null al percorso SVG (utilizzando d3.js) per eliminare i dati mancanti

Question

Utilizzando jQuery Flot, è possibile passare un valore null al meccanismo di stampa in modo che non disegni nulla sul grafico. Vedere come i record mancanti vengono soppresse:

Sto cercando di passare a d3js, in modo che io possa avere più profondo controllo di basso livello della grafica utilizzando SVG. Tuttavia, devo ancora scoprire come fare lo stesso processo di soppressione dei record mancanti. L'immagine sotto è un tentativo di fare questo, usando un valore di 0 invece di null (dove il pacchetto d3 si rompe). Ecco il codice per darvi un'idea di come ho prodotto il grafico qui sotto:

var line = d3.svg.line() 
    .x(function(d) { 
     var date = new Date(d[0]); 
     return x(date); 
    }) 
    .y(function(d) { 
     var height = d[1]; 
     if (no_record_exists) { 
      return y(0); 
     } 
     return y(height) + 0.5; 
    }); 

ho guardato l'elemento SVG path al Mozilla Developer Network, e ho scoperto che c'è un Comando MoveTo, M x y, che sposta la "penna" solo su un punto senza disegnare nulla. È stato implementato nel pacchetto d3js, in modo da non dover creare diversi elementi path ogni volta che trovo un record mancante?

Answer 1

La funzione defined del d3.svg.line() è il modo per farlo

Diciamo che vogliamo includere una pausa nel grafico se y è nullo:

line.defined(function(d) { return d.y!=null; }) 

Answer 2

Utilizzare line.defined o area.defined e vedere l'esempio Area with Missing Data.