forループでコールバック関数でアニメーションを実行

Question

updateMapColorの関数内で、ワールドマップは入力年の値に基づいて色を変更します。私はupdateMapColorと呼ぶことで、色の変化をアニメーション化しようとしていますが、動作しません。

setIntervalを使用する必要があるのはなぜですか？誰かが根本的な問題を説明してくれますか？

d3.select('body').append('button').attr({ 
    class: "button", 
    id: "animateMap" 
}) 
    .text("Animate the map") 
    .on("click", function (d) { 
     for (i = 0; i < yearArray.length; i++) { 
      updateMapColor[yearArray[i]] 
     } 
    }) 

var updateMapColor = function (y) { 
    year = y; 
    var rankingList = {} 
    coloredWorldMap.transition().duration(700).attr('fill', function (d) { 
     a = d; 
     x = d3.values(tennis).filter(function (d) { 
      return (d.DATE == year) 
     }) 
     rankingList = x; 

     x = d3.values(x).filter(function (d) { 
      return (d.COUNTRY_ID == a.id) 
     }) 

     if (x.length != 0) { 
      if (x[0].COUNT == 0) { 
       return "#fff" 
      } 
      else { 
       return colorScale(x[0].COUNT) 
      } 
     } 

     else { 
      return '#fff' 
     } 

     return colorScale(x[0].COUNT) 
    }) 

Answer 1

これはjavascriptの古典的な問題です：forのループ内の関数を少し遅れて呼び出しようとしています。あなたのコードは動作しません

理由は簡単です：forループは（百かそこらループのわずか数ミリ秒単位で）ほとんどすぐに実行され、updateMapColorへのすべての呼び出しがほぼ同時に発生します。

これを修正する方法はいくつかあります。私が最も好きな一つは生命維持を使用している：

(function loop(i) { 
    if (i++ >= (yearArray.length - 1)) return; 
    setTimeout(function() { 
     updateMapColor(i); 
     loop(i) 
    }, 500) 
})(-1); 

説明：

この生命維持はi = -1で初めて実行されます。その後、ifはiを増やします（forループのようにiを効果的に0にするi ++を実行します）、それがyearArray.length - 1以上であるかどうかを確認します。そうであれば、関数loopが返されます。そうでない場合は、updateMapColorと非常に機能loopを再度呼び出すsetTimeoutがスケジュールされます。

setInterval 0.5の秒で、デモをチェック：

var yearArray = d3.range(20); 
 

 
(function loop(i) { 
 
    if (i++ >= (yearArray.length - 1)) return; 
 
    setTimeout(function() { 
 
     updateMapColor(i); 
 
     loop(i) 
 
    }, 500) 
 
})(-1); 
 

 
function updateMapColor(index){ 
 
\t console.log("The function was called with i = " + index); 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script>

をPS：あなたがやろうとしているものは何でも、それはちょうど束を連鎖方法が容易になるだろうD3トランジションの