d3转换在多个浏览器中不起作用

Question

我的问题与this chart (Beeswarm plot)有关。我有一个项目，这是基于这个或多或少。有些事情是不同的，数据量稍微高了一点。由于某些原因，当图表使用新数据更新时，我在IE、Firefox或Edge中看不到任何转换；但它在chrome中工作得很好。

当我单击筛选器更新数据时，会有2-4秒的延迟，之后会反映出新的数据。没有过渡，但更像是图形刷新。

具体的浏览器版本如下所示：

Chrome v56 [Works]
Firefox v51
IE v11.576
Edge v38

有没有人知道这可能是什么原因？提前感谢

注意:我用来制作此图表的示例适用于IE、Firefox和Edge。

Jsfiddle here

Answer 1

这种滞后很容易解释。您忘了更改此设置：

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

在我的原始代码中，我有大约190个国家。然而，你有440个数据点，这需要更多的时间来计算。

因此，只需将对tick的调用次数更改为100到300之间：

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

这个数字越大，重叠圆的机会就越小，但滞后就越大。在具有默认设置的“普通”D3力定向图表中，tick在模拟停止之前运行300次。

如果要将刻度保持为dataset.lenght，则在变换中引入delay会降低滞后的视觉效果。

这是你最新的提琴：https://jsfiddle.net/oo20pdnk/

至于其他浏览器，我不能重现这个问题:对我来说，它在Firefox和IE中都可以工作。但是，您在底部有一些jQuery代码(我还是删除了这些代码，将D3与jQuery混合在一起让我很头疼)。

PS:当使用别人的代码时，我相信改变变量名是个好主意。现在你有一些像africaColor，europeColor，countriesCircles之类的东西，它们在我的代码中是有意义的，但在你的代码中却没有！