d3转换无法在多个浏览器中运行

Question

我的问题与this chart（Beeswarm情节）有关。我有一个或多或少基于此的项目。有些东西是不同的，数据量稍高。出于某种原因，当使用新数据更新图表时，我看不到IE，Firefox或Edge中的任何转换;但它在铬合金中表现完美。

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

确切的浏览器版本如下：

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

有没有人知道可能导致这种情况的原因？提前致谢

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

Jsfiddle here

Answer 1

可以很容易地解释滞后。你忘了改变这个：

SitesView = (ListCollectionView)CollectionViewSource.GetDefaultView(SitesCollection).SourceCollection

在我的原始代码中，我有大约190个国家/地区。但是，您有440个数据点，这需要更多时间来计算。

因此，只需将调用次数for (var i = 0; i < dataSet.length; ++i) simulation.tick(); 更改为100到300之间的值：

tick

此数字越大，重叠圆圈的机会越小，但滞后越大。在具有默认设置的“普通”D3力导向图表中，for (var i = 0; i < 150; ++i) simulation.tick(); // ^-------- tweak this number 在模拟停止前运行300次。

如果您希望将刻度保持为tick，则在过渡中引入dataset.lenght会降低滞后的视觉效果。

这是您更新的小提琴：https://jsfiddle.net/oo20pdnk/

关于其他浏览器，我无法重现这个问题：它在Firefox和IE中工作。但是，你底部有一些jQuery代码（无论如何我删除了，将D3与jQuery混合让我很头疼）。

PS：当使用其他人的代码时，我认为更改变量名称是一个好主意。现在你有delay，africaColor，europeColor之类的东西，这在我的代码中是有意义的，但不在你的代码中！