javascript - 如何用d3.js制作一个从黑到白连续闪烁的svg文本？

Question

下面的代码无法按预期工作。我想创建一个在黑白之间连续交替的文本 svg。感谢帮助!

   <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

使用transition.on ，这...

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

...您可以在转换结束时重复调用同一函数:

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:在解释性说明中，请注意，在 JavaScript 中，当您执行此操作时...

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

...您只需在短短几毫秒内调用 text_blink() 40 次。