title: Animate d3 line with gradient along
body: <p>I'm drawing lines programatically using this as a model: <a href="https://bl.ocks.org/mbostock/4163057" rel="nofollow">https://bl.ocks.org/mbostock/4163057</a></p>
  
  <p>the result was exactly what i expected, but i'd like to animate its drawing.</p>
  
  <p>if it was a normal line, i'd do something like:</p>
  
  <pre><code>var line = d3.select("g#" + value['id'])
    .datum(points)
  .append("path")
    .attr("d", line)
    .attr("stroke", "#444")
      .attr("stroke-width", 2)
      .attr("fill", "none");   
  
  var totalLength = line.node().getTotalLength();
  
  line
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
      .duration(1000)
      .ease("linear")
      .attr("stroke-dashoffset", 0);
  </code></pre>
  
  <p>but when i try to apply this in the gradient, the animation goes in the wrong way (literally, since it resamples the line with little portions of it).</p>
  
  <p>i tried to follow this other example (<a href="http://bl.ocks.org/rveciana/10743959" rel="nofollow">http://bl.ocks.org/rveciana/10743959</a>), based on the first, but it just looks animated cause the points are very close to each other.</p>
  
  <p>is there a way i can animated long lines?</p>
  
  <p>here's a jsfiddle: <a href="https://jsfiddle.net/g373h94e/" rel="nofollow">https://jsfiddle.net/g373h94e/</a></p>
  
  <p>what i have: the line with a gradient
  what i want: that this line with a gradient animates as the black line above it</p>