让SVG线条以动画形式“跟随”线条出现

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的任意函数）：

- Bluefire

---

通过操作stroke-dasharray属性可以实现这一点，有很多问题和答案涵盖了这个主题。 - Robert Longson

如何将图像剪裁为矩形，同时宽度从0过渡到最大值？ - tarulen

Answer 1

这里有一个非常好的例子，使用stroke-dasharray，链接在这里。将以下内容添加到您的路径中，然后添加.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); };
}

- tarulen

---

顺便提一下，对于任何浏览此内容的人，这个答案是可行的，但会使路径消失并在每次完成时重复动画。要消除这种效果，请从transition()函数定义中删除.each("end", function() { d3.select(this).call(transition); })。 - Bluefire

Answer 2

为了实现这一点，可以将线条裁剪成一个矩形，并使矩形的宽度从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轴是不均匀的，因此在路径的几乎水平和几乎垂直的部分之间可能会有明显差异。

- tarulen

---

这是不错的，如果没有其他选择的话我会使用它，但它并不能完全模拟线条被绘制的动画效果。如果线条要交叉或倒着走，它就无法工作。 - Bluefire