Drawing non-continuous lines with d3

Question

I'm using d3.js to make a simple line graph. I want to know if there's a way to create "holes" in the graph, that is, if the line can be interrupted or cut when there is no data available.

I'm looking into either delete the places I don't need from the domain, or setting the line weight to 0 in specific segments, but I can't find a way to do either of these.

Thanks for your help!

Answer 1

The D3 line generator has a built in function to do just this, line.defined. You can use this function to control where your line is defined and where it is not (like where you have missing data.) If you wanted to make your line undefined whenever the second value in the point array is a javascript NaN value, you could say:

line.defined(function(d) { return !isNaN(d[1]); }); 

Here is a good example of this in action.