javascript - 简单的路径过渡

Question

我正在尝试实现一个简单的路径转换，如此处所示。我既不是 javascript 也不是 d3 魔术师，所以我尽力做到最好：

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line)
  .transition().duration(next.duration||1000).delay(next.delay||0); # not right

如何让过渡正常工作？

Answer 1

在 d3 中进行路径绘制动画的一种方法是使用 dash-array 和 dash-offset 属性。

您可以做的是将 dashoffset 设置为总路径长度，然后随着时间的推移减小 dashoffset 直到它为零。这将模拟正在绘制的路径。查看有关stroke-dasharray和stroke-dashoffset的 SVG 文档。

从概念上讲，您正在做的是：

假设您的线长 4 个单位 (----)。您将 dasharray 设置为 (----,,,,) 即四个单位，然后是四个空格。您将 dashoffset 设置为 4 个单位，因此该线将位于可见空间左侧 4 个单位处。然后，当您将 dashoffset 减小到 0 时，线将看起来像 (-,,,,) 然后 (--,,,,) 依此类推，直到绘制整条线。

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });

var path = svg.append("path")
                  .attr("d", line(data))
                  .classed("line", true);

var pathLength= path.node().getTotalLength();

path
  .attr("stroke-dasharray", pathLength + " " + pathLength)
  .attr("stroke-dashoffset", pathLength)
  .transition()
  .duration(2000)
  .ease("linear")
  .attr("stroke-dashoffset", 0);

-

从Duopixel在这里的帖子中学习。