add space/gap in a line in D3

Question

I have a multiline chart similar to this, where each line represent a particular year and the x-axis represents days(e.g. Jan 1, Jan 2, ... Dec 31) in that particular year.

some lines are for leap years and some are for non-leap years. For a non-leap year line, I want the date Feb 29 to not display anything, i.e. a gap or a blank space in the line. Right now, my data set has null in the Feb 29 object. So D3 considers that point as 0 and stretches it all the way to bottom(x-axis).

Is there any way to achieve a space in line? Or is there a workaround for this problem? Any help is appreciated. Thank you.

Answer 1

You can use line.defined: https://github.com/d3/d3/wiki/SVG-Shapes#line_defined

According to the API:

The defined accessor can be used to define where the line is defined and undefined, which is typically useful in conjunction with missing data.

If your line should be undefined where the value is null or NaN, do this:

line.defined(function(d) { return !isNaN(d.x); });