[Solved]-Scale / Redraw d3.js gridlines on zoom / drag-d3.js

The axes are working when you zoom. That's because, in the function zoomed() you are updating the scales.

So in order to make the grids zoom, you just need to update its scales too. Put this code inside the function zoomed() and it should work.

xGrid.call(
    d3.axisBottom(x)
        .scale(d3.event.transform.rescaleX(x))
        .ticks(5)
        .tickSize(-height)
        .tickFormat("")
    )

Now you just need to replicate this scale update to all other grids. Sorry that I couldn't give you a complete answer, but I don't have much time right now.

Now, in my opinion, you should not have the function make_gridlines() because it is really simple, and when you're working on lots of updates on different places it confuses me.

So, instead of calling make_gridlines() you call d3.axisBottom(x).ticks(5).

(Note that I'm new to d3 and js, so I'm recommending this based on my little experience and knowledge)