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

【问题标题】：Looping transition in D3 version 4 and 5D3 版本 4 和 5 中的循环过渡
【发布时间】：2018-05-07 06:53:38
【问题描述】：

here 给出的示例答案适用于 D3 版本 3，但在版本 4/5 中，.each 已更改为 .on，并且该示例不再有效，即使将 .each 更改为.on。还有什么需要考虑的吗？这是 D3 版本 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();

【问题讨论】：

此代码为 D3 v3。请使用 v4/5 代码更新您的问题和小提琴，以便我们检查发生了什么。
另一方面，如果您的实际问题是如何为 v4/v5 更改它：1. 不要将对象放入 attr，以及 2. 更改 ease 值（除了each，当然）。完成后，您会看到这段代码有效。

标签： javascript loops d3.js transition

【解决方案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)。

更新小提琴：http://jsfiddle.net/wqptuews/

【讨论】：