CODEWITHSUNDEEP
javascriptd3.jssvgdata-visualization
software_writer
software_writer

Reputation: 4458

add space/gap in a line in D3

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.

Upvotes: 4

Views: 1532

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

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

Upvotes: 5

Related Questions