Heavy Flickering and Shifting with d3-Simulation

[Gykonik]

O have included a d3-simulation in my NetV-Chart. The graph is relatively large (4k nodes, 50k edges) and the simulation runs 130 times. However, I have optimized it to only re-rendered after every 5th run.

However, there is still quite a lot of flickering and the position regularly shifts to the top left corner - instead of the center.
Do you happen to know what the reason for this is?

In the following you can see an excerpt of how I create it and apply the force simulation.

const container: any = document.getElementById('graph-container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;

this.graph = new NetV({
  container: container,
  width: width,
  height: height,
  node: {},
  link: {},
  nodeLimit: 5000,
  linkLimit: 50000
})

this.graph.data(this.inputGraph);
this.graph.draw();

this.graph.on('zoom', () => {})
this.graph.on('pan', () => {})

this.simulation = forceSimulation(this.inputGraph.nodes)
  .alpha(1)
  .alphaMin(0.05)
  .velocityDecay(0.5)
  .force("link", forceLink(this.inputGraph.links))
  .force("charge", forceManyBody().strength(-0.5))
  .force("center", forceCenter().strength(2));

this.simulation.on("tick", () => {
  console.log("tick");
  this.iteration++;
  this.inputGraph.nodes.forEach((n: any) => {
	const node = this.graph.getNodeById(n.id)
	node.x(n.x)
	node.y(n.y)
  })
  if (this.iteration % this.STEP_SIZE == 0) {
	this.graph.draw()
  }
});

this.simulation.on("end", () => {
  console.log("finished");
  // this.graph.draw()
});