var zoomer = d3.zoom()


var zoomer = d3.zoom().on("zoom", function () {
            g.attr("transform", d3.event.transform);

at least did some movement and zooming started to work. BUT it has sprouted another issue and that is after zoomed through button when I zoom-in or zoom-out using mouse, the WHOLE 'g' goes back to its previous position and starts zooming from there. Which is weird and confuses the user.

By the way I still don't know how to zoom in such a way that FOCUS goes to 3rd Circle; and after that when user zooms through mouse-wheel it zooms from current position instead of previous position

I thought to answer my question by updating the progress made.

Related Query