x-axis tick labels are not being generated while zooming

Please follow these example link :-[source code](https://gist.github.com/macxfadz/e5adb5f97c689fa0fb12ed9807de8887)

[Code Pen Link](https://codepen.io/macxfadz/pen/GvWxBR)

When graph **_axis-x_** fill with arbitrary number of integer array described as above example and some values as **_y-axis_** data(identical cardinality),While zooming by mouse middle mouse wheel through x -axis some ticks go beyond graph origin and sometimes first element of x-axis shift to the right side with y data.
Please refer this images -[Image 1]( https://ibb.co/gJo47F) [Image 2](https://ibb.co/fO12uv)
Main issue is even if **zoom** **_enabled_** and **rescale** **_enabled_** new axis-x ticks with text won't be generated,also axis-x ticks value gap is same even if zoom in further.
Please help on this issue how to resolve this issue at least using **d3** functionalities?