Pasar valores nulos a la ruta SVG (usando d3.js) para suprimir datos faltantes

Question

Usando jQuery Flot, puedo pasar un valor de null al mecanismo de trazado para que no dibuje nada en el trazado. Vea cómo se suprimen los registros faltantes:

Estoy buscando a trasladarse a d3js, para que pueda tener más profundo control de bajo nivel de los gráficos usando SVG. Sin embargo, todavía tengo que descubrir cómo hacer el mismo proceso de supresión de registros faltantes. La imagen a continuación es un intento de hacer esto, utilizando un valor de 0 en lugar de null (donde se rompe el paquete d3). Aquí hay un código para darle una idea de cómo me produjo el siguiente gráfico:

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

Miré hacia arriba el elemento SVG path en la red de desarrolladores de Mozilla, y descubrí que hay una Comando MoveTo, M x y, que solo mueve el "lápiz" a algún punto sin dibujar nada. ¿Se ha implementado esto en el paquete d3js, de modo que no tendré que crear varios elementos path cada vez que encuentro un registro faltante?

Answer 1

La función defined de d3.svg.line() es la manera de hacer esto

Digamos que queremos incluir un descanso en la tabla si y es nulo:

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

Answer 2

Use line.defined o area.defined, y vea el ejemplo Area with Missing Data.