Line not visible in line chart when having same value in the domain() - using D3

Question

I am trying to build a line chart using D3 and I am using this example.

The problem that I am facing is that when I am passing a dataset that contains the same value in the linear.domain() fof the y then the line of the line chart gets drawn on top of the horizontal axis and as a result is not visible. Also no numbers are printed on the y axis.

Here is a JSFiddle with my code.

The metrics variable contains 3 objects, three different timestamps with the same value. On the result panel the line is get drawn on top of x axis. If you change one of the three values from 5 to any other number then the line chart gets drawn as normal.

Any ideas on how can I draw the line in the middle of the y axis when the metrics variable contains values of the same value?

Thanks

Answer 1

Instead of line

      y.domain(d3.extent(metrics, function(d) { return d.close; }));

use

      y.domain([d3.max(metrics, function(d) { return d.close; }) + 0.01,
                d3.min(metrics, function(d) { return d.close; }) - 0.01]);

The thing is, if y scale is just segment of length 0, like [5.0, 5.0] (or any other number other that 5.0), d3 is totally confused, and refuses to display anything on y axis, and places 5.0 right at origin.

With new code: the following is obtained for the same case:

]

Here is also link to jsfiddle.