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

Question

给出的示例答案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 不再使用对象文字（即 {}）来设置属性（以及类和样式）。您可以通过包含 d3-selection-multi (https://d3js.org/d3-selection-multi.v1.min.js) 并调用 .attrs 而不是 .attr 来添加对设置属性和样式的支持。或者你可以只使用多个 .attr.

此外，.ease() 现在采用缓动函数而不是字符串。为方便起见，d3v4 包含大量缓动函数（可在 https://github.com/d3/d3-ease 查看）。您可以通过 selection.ease(d3.easeLinear).

之类的方式调用它

已更新 Fiddle：http://jsfiddle.net/wqptuews/

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

Looping transition in D3 version 4 and 5

javascript

transition

loops

d3.js