複数のブラウザで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

遅れを容易に説明することができます。これを忘れてしまった：

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

私の元のコードには、約190カ国がありました。しかし、440データポイントがあり、計算に時間がかかります。

はこのように、単純に100と300の間で何かにtickにコール数を変更します。

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など、私のコードでは意味がありますが、あなたのものではありません。