使SVG线显示为动画＆＃34;跟随＆＃34;这条线

Question

我使用以下代码在条形图上绘制一条线：

data.forEach(function(elem, index) {
    svg.append("path")
        .datum(elem)
        .attr("class", "line")
        .style("color", colors[index])
        .attr("d", line);
});

其中data是一个多维数组，其每个元素都是[{x: 0, y: whatever}, {x: 0.5, y: another-y-value}, ...]形式的另一个数组，即该行经过的一组点。我想要做的是使线条看起来好像正在被绘制，即不是让它立即显现，我希望它从第一点到第二点明显延伸，依此类推，同时保持其曲率。这是它目前的样子（对于将x映射到y的任意函数）：

Answer 1

[对不起双重回答，这个归功于@RobertLongson]

使用stroke-dasharray here有一个很好的例子。添加以下内容，然后将.call(transition)添加到您的路径中。

function transition(path) {
  path.transition()
    .duration(7500)
    .attrTween("stroke-dasharray", tweenDash)
    .each("end", function() { d3.select(this).call(transition); });
}

function tweenDash() {
  var l = this.getTotalLength(),
      i = d3.interpolateString("0," + l, l + "," + l);
  return function(t) { return i(t); };
}

Answer 2

实现此目的的一种方法是将clip线条转换为矩形，其宽度从0平滑过渡到最大宽度。见http://jsfiddle.net/pLL30tcz/2/

将以下内容添加到<svg>：

<defs>
  <clipPath id="clipPath">
      <rect x="0" y="0" width="0" height="400" />
  </clipPath>
 </defs>

然后在路径元素上剪切.style("clip-path","url(#clipPath)")行。最后，绘图效果可以如下实现：

d3.select("#clipPath rect")
  .attr("width", "0")
  .transition()
  .duration(4000)
  .attr("width","400")

您只需根据需要调整坐标。唯一的缺点是沿着线的速度不均匀，但只是沿着x轴，因此在路径的几乎水平和几乎垂直的部分之间可以看到差异。