d3.js transition無限循環

d3.js transition無限循環

利用d3.js的 transition實現無限循環。在循環結束後添加一個回調，無限循環就回調自己就可以了。·.on('end,funame),。下面通過d3在body中添加了一個div。然後讓他一直左右移動。

 let di = d3.select('body')
             .append('div')
             .text('無限循環動畫')
 let run = () => {
     di.transition()
         .duration(1000)
         .delay(200)
         .ease(d3.easePolyInOut)
         .style("transform", "translate(0px, 0px)")
         .transition()
         .duration(1000)
         .delay(200)
         .ease(d3.easePolyInOut)
         .style("transform", "translate(100px, 0px)")
         .on('end', run)
 }
 run()