I recently started working with D3js and I have a bit of trouble zooming in on individual nodes within a packing circle Currently, I am just zooming into the Mouse's X and Y coordinates. It gets difficult to manage when the zoom scale is increased (Jumps around the SVG). I tried following Mike Bostock's circle packing example but found it to be confusing and unclear.

function zoomsTo(e) {
    // coordinate of mouse
    var mouseX = e.layerx
    var mouseY = e.layerY

    let k = 3
    let svg = d3.select("svg")
    svg.transition().call(zoom.scaleTo, k)

    // ZOOMS INTO SPECIFIC COORDINATES
    //1F ELSE STATEMENT Checks if mouse is near edge. Limits jumping around
    if (mouseX > 100 && mouseX < 145 || mouseY > -49 && mouseY < -5) {
        svg.transition().duration(1000)
            .call(zoom.translateTo, mouseX / 3, mouseY / 3)
    }

    else if (mousex > 45 || mouseY > 400) {
        svg.transition().duration(1000)
            .call(zoom.translateTo, mouseX / 2.75, mouseY / 2.85)
    }

    else if (mouseX < -10 && mouseY >= 250)
        svg.transition().duration(1000)
            .call(zoom.translateTo, mouseX / 2.75, mouseY / 2.85)
    else {
        svg.transition().duration(1000)
            .call(zoom.translateTo, mouseX, mouseY)

        // Checks if svg translate is at edge to avoid jumping around as translate value is depended on the scale.
        // If scale is 1.5, x and y(300,300) is not the same as when scale is 2

        let translateValue = svg.attr('transform')

        console.log(svg.attr("transform"))

        // MESSY FOR TESTING PURPOSES
        // instead of default values we need dynamic values

        if (translatevalue >= "(-300,-36)" || translateValue >= '(-380,2)' || translateValue >= '(-400,0)' || translatevalue >= '(0,-250) ' || translatevalue >= "(-150,288) " || translatevalue >= "(8, -500)" || translateValue >= '(-800,0)' || translateValue > "(-1000, 0)" ) 

        //instead of having set value put pixel calculations
        svg.attr("transform', ‘translate(’ + (width/3) +", " + height/3 + ')")
        console.log("AFTER " + svg.attr( "transform"))
    
    }
}

PS. (I have it messy for testing purposes ;) )