[Solved]-d3 transitions not working in multiple browsers-d3.js

The lag can be easily explained. You forgot to change this:

for (var i = 0; i < dataSet.length; ++i) simulation.tick();

In my original code I had approximately 190 countries. However, you have 440 data points, and that takes more time to compute.

Thus, simply change the number of calls to tick to something between 100 and 300:

for (var i = 0; i < 150; ++i) simulation.tick();
//                   ^-------- tweak this number

The greater this number the smaller the chance of overlapping circles, but the greater the lag. In a "normal" D3 force directed chart with the default settings, tick runs 300 times before the simulation stops.

If you want to keep the ticks as dataset.lenght, introducing a delay in the transitions reduces the visual effect of the lag.

Here is your updated fiddle: https://jsfiddle.net/oo20pdnk/

Regarding the other browsers, I couldn't reproduce the problem: It is working in Firefox and IE to me. However, you have some jQuery code at the bottom (which I removed anyway, mixing D3 with jQuery gives me headache).

PS: When using someone else's code, I believe it's a good idea changing the variable names. Right now you have something like africaColor, europeColor, countriesCircles etc, which makes sense in my code, but not in yours!