title: d3 - Drawing svg path slowly, end of lines disappear
body: <p>So I am trying to smoothly draw five distinct curves using d3. <a href="http://jsfiddle.net/B2tLW/4/" rel="nofollow noreferrer">JSFiddle here</a></p>
  
  <p>The first 4 are hard-coded, for my sake, and the fifth I push onto an array of lineData in a for loop because I eventually want to more dynamically.</p>
  
  <pre><code>var lineData = [[{ "x": 1, "y": 300}, { "x": 200,  "y":70}, { "x": 450,  "y": 300}],
                    [{ "x": 1, "y": 300}, { "x": 250,  "y":70}, { "x": 550,  "y": 300}],
                    [{ "x": 1, "y": 300}, { "x": 300,  "y":70}, { "x": 620,  "y": 300}],
                    [{ "x": 1, "y": 300}, { "x": 350,  "y":70}, { "x": 720,  "y": 300}]];
  
  for (var i = 0; i &lt; 1; i++) {
      lineData.push([{ "x": 1, "y": 300}, { "x": 280,  "y":70}, { "x": 580,  "y": 300}]);
    };
  </code></pre>
  
  <p>I am using the stroke-offset technique used <a href="https://stackoverflow.com/questions/13408144/simple-path-transition">here</a>, doubling the dash-array, setting the offset to the length of each path, and slowly making the offset return to 0. </p>
  
  <p>However, this causes my last curves to be cut short, and I can't figure out why.</p>
  
  <pre><code> $(".line").each(function(i,d){
  
      var t = [1100, 1304,4506,8101,10607, 12900],
      bases = ["first", "second", "third", "fourth"];
  
      var totalLength = d.getTotalLength();
  
        d.style.transition = d.style.WebkitTransition = 'none';
  
        d3.selectAll("path").attr("stroke-dasharray", totalLength + " " + totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
        .duration(function(d,i) { return t[i]; })
        .ease("linear")
        .attr("stroke-dashoffset", 0)
        .each("end", function() { 
          svg.append("text")
          .attr("class", "t")
          .attr("x", w / 2)
          .attr("y", h)
          .attr("text-anchor", "middle");
  
       });
  </code></pre>
  
  <p>I've played around with the length I gave the dash-array and the animation times, but I can't seem to find what's causing this weird behavior.</p>
  
  <p>I also hardcoded the fifth line, and that worked well, so the problem may be in my adding of the lines?</p>
  
  <p>Here's a <a href="http://jsfiddle.net/B2tLW/4/" rel="nofollow noreferrer">jsfiddle</a> with my problem: any help is greatly appreciated!</p>