Noobster Noobster - 6 months ago 29
jQuery Question

D3: looping transition with dynamic name

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 (e.g. 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

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