Looping Transition In D3 Version 4 And 5

The example answer which was given here works fine with D3 version 3, but in version 4/5 .each was changed to .on and the example doesn't work anymore, even if changing .each to .o

Solution 1:

d3v4 moved away from using object literals (i.e. {}) to set attributes (and classes and styles). You can add support back for setting attributes and styles by including d3-selection-multi (https://d3js.org/d3-selection-multi.v1.min.js), and calling .attrs instead of .attr. Alternatively you can just use multiple .attr.

Also, .ease() now takes an easing function instead of a string. For convenience, d3v4 includes a slew of easing functions (viewable at https://github.com/d3/d3-ease). You'd invoke it via something like selection.ease(d3.easeLinear).

Updated Fiddle: http://jsfiddle.net/wqptuews/