score:2

Accepted answer

Using transition.on, which...

Adds or removes a listener to each selected element for the specified event typenames

... you can call the same function repeatedly when the transition ends:

function blink() {
  d3.select("text").transition()
    .duration(1000)
    .style("fill", "rgb(255,255,255)")
    .transition()
    .duration(1000)
    .style("fill", "rgb(0,0,0)")
    .on("end", blink)
    //    ^------^---- calling blink again when the transition ends
}

blink();
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
  <text x="100" y="40" fill="red" id="test123">Make this Text Blink!</text>
</svg>

PS: On an explanatory note, be aware that, in JavaScript, when you do this...

for (x=0; x<40; x++){      
    text_blink()
}

... you are simply calling text_blink() 40 times in just a couple of milliseconds.

score:0

Instead of "on" you can use .each in d3 version 3.

function blink() {
  d3.select("text").transition()
    .duration(1000)
    .style("fill", "rgb(255,255,255)")
    .transition()
    .duration(1000)
    .style("fill", "rgb(0,0,0)")
    .each("end", blink)
    //    ^------^---- calling blink again when the transition ends
}

blink();

Related Query