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 .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();

回答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/

来源：https://stackoverflow.com/questions/50208577/looping-transition-in-d3-version-4-and-5

标签

javascript

loops

d3.js

transition