d3.js Forcing Nodes away from bounding box

I am currently working on a project where I need to keep the nodes of a force simulation away from the svg edges. My attempt was using a exponential curve to increase the centering force for nodes reaching a certain x coordinate. I am using this function

function getBorderForce(x, width, middle, steepness = 10) {
        return Math.pow(((x-middle)/(width/2)), steepness)
    }

If the given x value reaches middle + width / 2 it returns a value of 1. The steepness of the increase can modified by steepness parameter. A higher value means the nodes would get repealed later. I hope it is understandable.

I would then implement this function as follows into a d3.forceSimulation():

 const sim = d3.forceSimulation().
    .force("forceX", d3.forceX().x(d => d.forceX).strength(0.02))
    .force("forceY", d3.forceY().y(d => d.forceY).strength(0.1))
    .force("edgeRepeal", d3.forceX().x(_ => center).strength(d => 
         getBorderForce(d.x, width, center)
    ))
    .nodes(nodes)

When I use this approach my browser crashes and I get an out of memory error. It works is if I use the d.forceX instead of the d.x value, but that means that nodes closer to the edges would be pushed in and would not be placed on their desired position d.forceX. Maybe someone has a better idea or can show the flaw in my code – I am relatively new to d3, so it would be no surprise.

All the Best