Home » Javascript » How to set D3's tick function for multiple force layouts?

How to set D3's tick function for multiple force layouts?

Posted by: admin August 19, 2018 Leave a comment

Questions:

I am trying to render multiple D3 force layouts on a page. I managed to initially render the layouts, but only the last graphs’ nodes can be dragged a few seconds after render.

I had the same problem a while ago. The problem came up because d3.drag() and .tick() weren’t pointing to the right d3.forceSimulation. They were pointing to another d3.forceSimulation I mistakenly declared in the global namespace.

This time around I have multiple d3.forceSimulation again, but that’s because I do want to render multiple force layouts.

I tried to map over each force layout’s dataset and call d3.forceSimulation and tick() with each set.

Now, should tick() be called only once for all the data? Or for each layout seperately? It seems as if tick keeps working for the last graph only. So how can tick be set for all force.simulation?

A live example can be found be here

Answers: