path - tip - Pase valores nulos a la ruta SVG(usando d3.js) para suprimir los datos faltantes

d3 tooltip

Question

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

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

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

Busqué el elemento de path SVG en la Red de desarrolladores de Mozilla y descubrí que hay un comando MoveTo, M xy , que solo mueve el "lápiz" a algún punto sin dibujar nada. ¿Se ha implementado esto en el paquete d3js , para que no tenga que crear varios elementos de path cada vez que encuentro un registro faltante?

Answer 1

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

Digamos que queremos incluir una ruptura en el gráfico si y es nulo:

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

Answer 2

Use line.defined o area.defined , y vea el ejemplo Área con datos faltantes .