沿着渐变动画d3线

Question

我使用此作为模型以编程方式绘制线条：https://bl.ocks.org/mbostock/4163057

结果正是我所期望的，但我想为它的绘画制作动画。

如果是正常的行，我会做类似的事情：

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

但是当我尝试在渐变中应用它时，动画以错误的方式进行（字面意思是，因为它重新采样了线条的一小部分）。

我尝试按照第一个示例（http://bl.ocks.org/rveciana/10743959）进行操作，但它看起来很简单，因为这些点非常接近。

有没有办法可以设置长线动画？

这里是一个jsfiddle：https://jsfiddle.net/g373h94e/

我拥有的：带渐变的线条 我想要的是：带有渐变的这条线动画为它上面的黑线