不能使路径战平D3增长缓慢(Can't make paths draw growing sl

使用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:

我相信，“D3的方式”来做到这一点是与自定义补间功能。 ：你可以在这里看到一个工作实现http://jsfiddle.net/nrabinowitz/XytnD/

这假定你有一台发电机称为line设置与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 （如果你的背景是复杂的）过线，和过渡过来，以露出下面的行权。

Answer 2:

动画在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 3:

根据您链接到了后，我想出了下面的例子：

var i = 0,
    svg = d3.select("#main");

String.prototype.repeat = function(times) {
   return (new Array(times + 1)).join(this);
}

segments = [{x:35, y: 48}, {x: 22, y: 48}, {x: 22, y: 35}, {x: 34, y:35}, {x: 34, y:60}];
line = "M"+segments[0].x + " " + segments[0].y

new_line = line + (" L" + segments[0].x + " " + segments[0].y).repeat(segments.length);
 var mpath = svg.append ('path').attr ('d',new_line )
             .attr ('fill', 'none')
             .attr ('stroke', 'blue')

for (i=0; i<segments.length; i++)
    {
    new_segment = " " + "L"+segments[i].x + " " + segments[i].y
    new_line = line + new_segment.repeat(segments.length-i)
    mpath.transition().attr('d',new_line).duration(1000).delay(i*1000);
    line = line + new_segment

    }

这是一个有点难看，但工程。 你可以看到它的jsfiddle

文章来源: Can't make paths draw growing slowly with D3