D3 repeat transition

http://stackoverflow.com/questions/35569546/d3-repeat-transition-for-series-of-elements

by Augustus Yuan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

    <div id="sketches"></div>

CSS

body {
      padding: 1rem;
    }
    svg {
      background-color: silver;
      stroke: black;
      stroke-width: 1;
    }

JavaScript

(function() {
        var w = 100, h = 100
        var div = d3.select('#sketches').append('div')
        var svg = div.append("svg")
            .attr("width", w)
            .attr("height", h)

        var x = 0, y = 55

        var data = [
            [x, y, x+20, y-40],
            [x+10, y, x+30, y-40],
            [x+20, y, x+40, y-40]
        ];
        
        var count = 0;

        (function lines() {
          svg.selectAll('line')
            .data(data).enter().append('line')
            .attr("stroke", "black")
            .attr('x1', function(d) { return d[0]})
            .attr('y1', function(d) { return d[1]})
            .attr('x2', function(d) { return d[2]})
            .attr('y2', function(d) { return d[3]})
            .transition()
            .duration(3000)
            .ease('linear')
            .attr('x1', function(d) {return d[0] + 60})
            .attr('y1', function(d) {return d[1]})
            .attr('x2', function(d) {return d[2] + 60})
            .attr('y2', function(d) {return d[3]})
            .each('end', function(d) {
              d3.select(this).remove();
              count++;
              if (count == 3) {
                count = 0;
                lines();
              }
            });
        })()
    })()