I have a d3 force simulation inside a zoom layer. Basically this example modified with further functionality: https://bl.ocks.org/puzzler10/4438752bb93f45dc5ad5214efaa12e4a

My Question is about the zoom configuration.

let transformXYLimit = 700;

var zoom_handler = d3.zoom()
    .scaleExtent([.7, 5.5])
    .on("zoom", (event) => {
        // This x/y limitation does not work properly
        event.transform.x = Math.min(transformXYLimit, Math.max(event.transform.x, -transformXYLimit));
        event.transform.y = Math.min(transformXYLimit, Math.max(event.transform.y, -transformXYLimit));
        zoomlayer.attr("transform", event.transform);
    });

zoom_handler(svg);

I have managed to limit the zoom with the "scaleExtent()" function, however i also want to limit how much the user can drag the "zoomlayer" in the x/y direction so he wont "loose" the graph into nothingness when he drags around too much. Ive tried to limit it by setting a fixed limit to the event.transform.x/y variables however combined with a higher zoom this wont let me see the whole graph. Is there any "official", proper way to limit these x/y drag coordinates?