javascript - 无法使用 D3 使路径绘制缓慢增长

Question

使用 d3 图形库，我似乎无法让路径绘制缓慢，因此可以看到它们在增长。

This site在“折线图(展开)”部分有一个完美的例子，但没有给出该部分的代码。有人可以帮助我了解可以实现这一目标的 D3 代码行吗？

当我尝试附加 delay() 或 duration() 时，例如在以下代码片段中，路径仍然立即绘制，并且该段之后的所有 SVG 代码都无法呈现。

    var mpath = svg.append ('path');
        mpath.attr ('d', 'M35 48 L22 48 L22 35 L22 22 L35 22 L35 35 L48 35 L48 48')
             .attr ('fill', 'none')
             .attr ('stroke', 'blue')
             .duration (1000);

Answer 1

在 svg 中设置线条动画时的常见模式是设置路径长度的 stroke-dasharray，然后设置 stroke-dashoffset 动画:

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

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

你可以在这里看到一个演示: http://bl.ocks.org/4063326