D3中的循環過渡

Question

基本論述：我有點像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點之間快速跳轉，而不會使duration(4000)位生效。 我也嘗試刪除底部的行（ d3.select(this).remove() ）然后在每次調用的頂部追加一個新的重復（）。 我也嘗試過重置x1，x2，y1和y2並完全跳過轉換。 我並不是說我正確地嘗試了這些，但我的結果要么根本沒有線，無限的線，要么是到達B點的一條線並且停留在那里。

關於如何實現我（可能非常簡單）的目標的任何其他建議？ 非常感謝你的幫助！

Answer 1

在我看來，你不需要兩次指定起始坐標。 你可以在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);
    }
}

這是一個小提琴