简单路径切换

Question

我想实现如图所示here一个简单的路径转换。我不是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是使用破折号阵列和冲偏移属性。

你可以做的是设置dashoffset总路径长度，则减少dashoffset随着时间的推移，直到为零。这将模拟正在绘制的路径。检查出stroke-dasharray和stroke-dashoffset的SVG文档。

从概念上讲，你在做什么是这样的：

说你的线是4个单位长度（----）。您将dasharray设置为（---- ,,,,），即四个单位，然后是四个空格。您将折线偏移设置为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's得知后here。