d3轉換不能在多個瀏覽器中工作

我的問題與this chart（Beeswarm plot）有關。我有一個基於這個或多或少的項目。有些東西是不同的，數據量更高一些。出於某種原因，當圖表更新爲新數據時，我在IE，Firefox或Edge中看不到任何轉換;然而它在鉻合金中完美運作。d3轉換不能在多個瀏覽器中工作

當我點擊過濾器來更新數據時，會有2-4秒的滯後時間，新的數據會在這之後反映出來。沒有轉換，但更像是圖形刷新。

確切的瀏覽器版本如下：

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

沒有任何一個有什麼可能會導致此任何想法？在此先感謝

注意：我用來製作此圖表的示例適用於IE，Firefox和Edge。

的jsfiddle here

來源

2017-03-08 sparta93

滯後可很容易解釋。你忘了改變這個：

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等等，這在我的代碼中是有意義的，但在你的代碼中是沒有意義的！

來源

2017-03-08 01:53:57

謝謝Gerardo，玩'價值'和引入延遲緩解了這個問題。是的，我需要重構代碼，包括變量名稱。我更忙於試圖首先使用我的數據。 – sparta93

在另一張筆記上，在這張圖上做了很棒的工作。這是一個非常酷的可視化。 – sparta93

謝謝。另一個解決方案是在每個勾號中移動圓圈，就像普通的力量指示圖表一樣。這將大大減少延遲。 –

d3轉換不能在多個瀏覽器中工作

回答

相關問題