Learn D3.js

Cartesian grids

You can create a Cartesian grid by drawing long tick lines that cross the chart area. One way to do this is to reposition the x1/x2 or y1/y2 coordinates of the grid lines and the x or y positions of each text label. It's simpler to use tickSize(), but you will still need to move the lines or axis in the opposite direction because ticks grow in the same direction as the axis's orientation. If you move the entire axis, you should at least move the domain lines back to their original position.

It's also good practice to label each Cartesian axis with a class name so that you can select the correct domain and tick objects. A standard is to use x-axis and y-axis, as follows:

svg.append("g").attr("class", "x-axis").call(axisX); ...