javascript - d3 过渡在多个浏览器中不起作用

Question

我的问题与 this chart 有关(蜂群情节)。我有一个项目或多或少基于此。有些东西不一样，数据量有点大。由于某种原因，当图表更新为新数据时，我在 IE、Firefox 或 Edge 中看不到任何转换；但它在 Chrome 中完美运行。

当我点击过滤器更新数据时，有 2-4 秒的延迟，然后新数据就会反射(reflect)出来。没有转换，但更像是图形刷新。

具体浏览器版本如下:

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，则在转换中引入延迟可以减少滞后的视觉效果。

这是您更新的 fiddle :https://jsfiddle.net/oo20pdnk/

关于其他浏览器，我无法重现该问题:它在 Firefox 和 IE 中工作。但是，底部有一些 jQuery 代码(无论如何我都将其删除，将 D3 与 jQuery 混合起来让我头疼)。

PS:当使用别人的代码时，我相信更改变量名称是个好主意。现在你有像africaColor，europeColor，countriesCircles等，这在我的代码中有意义，但在你的代码中没有意义!