D3版本4和5中的循环过渡

Question

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 .on . Is there anything else which have to be considered? Here is the fiddle and the code with D3 version 4: jsfiddle

var svg = d3.select("body")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500);

// code, code, code, irrelevant code...

function timeForTimeline(){ // har
    var timeline = svg.append("line")
        .attr("stroke", "steelblue");
    repeat();

    function repeat() {
    timeline.attr({
        'x1': 0,
        'y1': 130,
        'x2': 168,
        'y2': 130
    })
    .transition()
    .duration(4000)
    .ease("linear")
    .attr({
        'x1': 0,
        'y1': 430,
        'x2': 168,
        'y2': 430   
    })
    .each("end", repeat);
};
};



timeForTimeline();

Answer 1

d3v4 moved away from using object literals (ie {} ) 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/