Javascript D3中的循环转换

基本说明：我是一个D3新手

我的目标是让一条线从a点移动到B点，然后立即在a点重新出现并重复该转换。我试过很多不同的方法，但这是我最接近的一次

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")
        .attr({
            'x1': 0,
            'y1': 130,
            'x2': 168,
            'y2': 130
        });
    (function repeat() {
        timeline = timeline
            .transition()
            .duration(4000)
            .ease("linear")
            .attr({
                'x1': 0,
                'y1': 430,
                'x2': 168,
                'y2': 430   
            })
            .each("end", function(){
                d3.select(this)
                    .transition()
                    .duration(0)
                    .attr({
                        'x1': 0,
                        'y1': 130,
                        'x2': 168,
                        'y2': 130
                    })
                    .each("end", repeat);
            });
    })();
};

结果是一个良好的开始转换，随后直线在点A和点B之间快速跳跃，而

持续时间（4000）

位不生效。我还尝试删除底部的行（

d3.select（this）.remove（）

），然后在每个调用的顶部添加一个新的行以重复（）。我还尝试过重置x1、x2、y1和y2，并完全跳过转换。我并不是说我正确地尝试了这些，但我的结果要么是根本没有直线，无限直线，要么是一条到达B点并停留在那里的直线

---

关于如何实现我的（可能是非常简单的）目标，还有其他建议吗？非常感谢你的帮助

在我看来，您似乎不需要两次指定起始坐标。您只需在repeat函数中指定初始坐标，然后立即调用它，如下所示：

function timeForTimeline() {
    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);
    }
}

---

这里有一个

在版本4中，它被更改为.on，而不是.eachexchanging

。每个

都带有

。对于d3v4，on

在v4或V5中不起作用，变化很大

.each

变成

.on

（至少对于转换事件），

.ease（“线性”）

变成

.ease（d3.easeLinear）

，并且

.attr（{}）

被删除，以支持多个

.attr

。有关更多信息，请参阅。