Render tick at zero y-value with d3 series plot

Question

I am trying to get a y-tick at "zero" for a multi-series d3 plot. My x-axis is a time scale and y-axis is some random data-scale. Here is my plunkr

http://plnkr.co/edit/emOKcxrHP7gU1U1l0Mff?p=preview

If I just add zero to the y-tick values, it does not work (i.e. in the following function if I say var yTickValues=[0] ) and it messes up my plot (draws another x-axis below the existing one)

                   function getYTickValues(){
                        var deltaY = Math.round((maxY - minY)/(yTickCount-1));
                        var yTickValues = [];
                        for(var i=0;i<yTickCount;i++){
                            yTickValues.push(((minY + i * deltaY) * 100) / 100);
                        };
                        return yTickValues;
                    }

I am unable to figure out how to fix this so I can always get a y-tick at zero. I would like to not touch my minX, maxX, minY and maxY because the domain range scale will change for the sake of accommodating the zero y-tick.

Any help is appreciated.

Answer 1

Change the y domain to start at 0:

y.domain([0, maxY]);

and then also including 0 in the yTickValues array as you suggest above:

var yTickValues = [0];

The data values still remain between minY and maxY, but the y-axis runs to 0. I think that's what the question was getting at?

I also made a couple of changes to the getYTickValues() function to evenly space the rest of the y tick values. See http://plnkr.co/edit/q6XnujIyB8JdzN8AA88j?p=preview