Heavy Flickering and Shifting with d3-Simulation
Opened this issue · 0 comments
Gykonik commented
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()
});