Bounty: 100

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?