Pass null values to SVG path (using d3.js) to suppress missing data

Question

Using jQuery Flot, I can pass a null value to the plotting mechanism so it just won't draw anything on the plot. See how the missing records are suppressed:

I'm looking to move to d3js, so that I can have deeper low level control of the graphics using SVG. However, I have yet to find out how to do that same process of suppressing missing records. The image below is an attempt to do this, using a value of 0 instead of null (where the d3 package breaks down). Here is some code to give you an idea of how I produced the graph below:

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

I looked up the SVG path element at the Mozilla Developer Network, and I found out that there is a MoveTo command, M x y, that only moves the "pen" to some point without drawing anything. Has this been implemented in the d3js package, so that I won't have to create several path elements every time I encounter a missing record?

Generalship

Note that using MoveTo would be great for having gaps in a simple (stroke-only) line, but would not work will with the green fill you show above. For that, you need distinct shapes or superfluous path commands to drop down to the baseline, come over the correct amount, and come back up again. – Favourable

Love the graphs, but see also: #15259944 – Paraffin

Answer 1

The defined function of d3.svg.line() is the way to do this

Let's say we want to include a break in the chart if y is null:

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

Paraffin

Answer 2

Use line.defined or area.defined, and see the Area with Missing Data example.

Stedfast

Thanks, I'll look this up. Actually I just raised an issue at Github regarding this :) Not really sure how to move forward with it though :( github.com/mbostock/d3/issues/583 – Generalship

What's d3.split? there's nothing on that page. Should probably also update your response, since #15259944 now shows how to do it. – Paraffin