D3中的循环过渡 [英] Looping transition in D3

问题描述

基本论述：我有点像D3新手。

Essential exposition: I'm a bit of a D3 newbie.

我的目标是让一条线从A点移动到B点，然后立即重新出现在点A并重复该过渡。我尝试了很多不同的东西，但这是我最接近的。

My goal is to have a line move from point A to point B, then immediately reappear at point A and repeat that transition. I've tried a lot of different things, but this is the closest I've come.

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点的一条线并且保持在那里。

The result is an excellent starting transition, followed by the line quickly jumping between point A and point B WITHOUT the duration(4000) bit taking effect. I've also tried removing the line at the bottom (d3.select(this).remove()) then appending a new one at the top of each call to repeat(). I've also tried just resetting x1, x2, y1, and y2 and skipping the transition altogether. I'm not saying I attempted those correctly, but my results were either no lines at all, infinite lines, or a single line that reaches point B and stays there.

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

Any other suggestions on how to accomplish my (likely very simplistic) goal? Thanks so much for your help!

推荐答案

在我看来，你不需要两次指定起始坐标。你可以在repeat函数中分配初始坐标并立即调用它：

It seems to me that you don't need to specify the starting coordinates twice. You could just assign the initial coordinates inside the repeat function and call it immediately like so:

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);
    }
}

这是小提琴

这篇关于D3中的循环过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！