d3.jsで黒から白に連続して点滅するsvgテキストを作成するにはどうすればいいですか？

Question

下記のコードは意図したとおりに動作しません。私は黒と白を交互に繰り返すテキストsvgを作成したいと思います。ヘルプは高く評価しました！

追加または指定されたイベントの型名

ため、選択された各要素にリスナーを削除します...あなたが繰り返し同じ関数を呼び出すことができます... transition.onを使用

<svg width="1000" height="500"> 
      <text x="100" y="400" fill="red" id="test123">Make this Text Blink!</text> 
     </svg> 
     <script type="text/javascript"> 

      function text_blink(){ 
       d3.select("#test123") 
       .transition() 
       .duration(1000) 
       .style("fill", "rgb(255,255,255)") 
       .transition() 
       .duration(1000) 
       .style("fill", "rgb(0,0,0)"); 
      } 

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

      } 
      </script> 

Answer 1

移行が終了したとき：

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>

あなたは、単にミリ秒だけのカップルに text_blink() 40回を呼び出している説明文には、そのあなたがこれを行うのJavaScript、中に注意してください...

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

...：

PS 。

Answer 2

代わりの"on"あなたはD3版確かに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();