D3：使用动态名称循环转换

Question

I understand you can't really transition events using a javascript loop when it comes to D3. But is there any reason to your knowledge why you cannot use dynamic names (eg dynamic path name)? For some reason the following won't work (all I am trying to do is to get Japan to 'glow' continuously on the map ...)

Please note: the first bit of the animation works and japan goes red. The animation then ceases, even though the console correctly yields "#Japan" and loops to infinity.

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))
  });
}

Kind regards -and thank you, G.

Answer 1

A problem may be that you call glowit() instead of giving the function as parameter to each() . You need to wrap it in a function:

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

Just to explain why @Joachim told you to wrap glowit inside an anonymous function, when you do each("end", glowit(paz)) , you are executing glowit immediately and passing its result to each . But wrapping it in an anonymous function makes it an argument to each .

For instance, if glowit had no arguments, you could simply eliminate the () , and it would not execute immediately. This code has the same effect:

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
  });
};

Test it and you'll see.