简单的路径转换

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的帖子中了解到这一点.