D3不能让路径慢慢增长

Question

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

此网站在"折线图(展开)"部分中有一个完美的示例,但没有为该部分提供代码.有人可以帮我解决可能导致这种情况发生的D3代码吗？

当我尝试追加延迟()或持续时间()时,例如在下面的代码片段中,路径仍然立即绘制,并且此段之后的所有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

Answer 2

我相信这样做的"D3方式"是使用自定义补间功能.你可以在这里看到一个有效的实现:http://jsfiddle.net/nrabinowitz/XytnD/

这假设您有一个名为linesetup up 的生成器d3.svg.line来计算路径:

// add element and transition in
var path = svg.append('path')
    .attr('class', 'line')
    .attr('d', line(data[0]))
  .transition()
    .duration(1000)
    .attrTween('d', pathTween);

function pathTween() {
    var interpolate = d3.scale.quantile()
            .domain([0,1])
            .range(d3.range(1, data.length + 1));
    return function(t) {
        return line(data.slice(0, interpolate(t)));
    };
}?

pathTween此处的函数返回一个插值器,该插值器获取该行的给定切片,由我们通过转换的距离定义,并相应地更新路径.

值得注意的是,我怀疑你会通过简单的路线获得更好的表现和更流畅的动画:在线上放一个白色矩形(如果你的背景很简单)或一个clipPath(如果你的背景很复杂),将其转移到右侧以显示下方的线条.