D3：動的名によるループの切り替え

Question

D3に関しては、javascriptループを使用してイベントを実際に移行することはできません。動的名（例：動的パス名）を使用できない理由は何ですか？何らかの理由で、以下のようなことはできません（私がしようとしていることは、日本が地図上で連続的に輝くようにすることだけです...）

注：アニメーション作品の最初のビットが赤くなります。コンソールが正しく "#Japan"と無限にループしても、アニメーションは終了します。

paz = "#Japan"; 
glowit(paz) 

function glowit(paz){ 
console.log(paz); 
d3.select(paz) 
    .transition() 
    .style("fill", "red") 
    .duration(1000) 
    .each("end", function(){ 
    d3.select(paz) 
     .transition() 
     .style("fill", "white") 
     .duration(1000) 
     .each("end", glowit("#" + this.id)) 
    }); 
} 

種類がみなし-andありがとう、 G.

Answer 1

問題ではなくeach()にパラメータとしての機能を持たせること、あなたコールglowit()かもしれません。あなたは、関数内でそれをラップする必要があります。

function glowit(paz){ 
    console.log(paz); 
    d3.select(paz) 
    .transition() 
    .style("fill", "red") 
    .duration(1000) 
    .each("end", function(){ 
     d3.select(paz) 
     .transition() 
     .style("fill", "white") 
     .duration(1000) 
     .each("end", function() { 
      glowit("#" + this.id); 
   }); 
    }); 
} 

Answer 2

だけ@Joachimはあなたがeach("end", glowit(paz))を行う際に、匿名関数の内部でglowitをラップするためにあなたに言った、なぜ、あなたはすぐにglowitを実行し、eachにその結果を渡している説明します。しかし、それを無名関数にラップすると、eachの引数になります。

たとえば、glowitに引数がない場合は、()を削除するだけですぐに実行されません。このコードは同じ効果があります：

glowit(); 

function glowit(){ 
    d3.select("#Japan") 
    .transition() 
    .style("fill", "red") 
    .duration(1000) 
    .each("end", function(){ 
    d3.select("#Japan") 
    .transition() 
    .style("fill", "white") 
    .duration(1000) 
    .each("end", glowit);//without the parentheses 
    }); 
}; 

テストしてみましょう。