Javascript 简单路径转换
我正在尝试实现一个简单的路径转换,如图所示。我既不是javascript,也不是d3魔术师,所以我尽力做到最好:Javascript 简单路径转换,javascript,d3.js,Javascript,D3.js,我正在尝试实现一个简单的路径转换,如图所示。我既不是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) .
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
如何使过渡正常工作?在d3中进行路径绘制动画的一种方法是使用虚线阵列和虚线偏移属性 您可以将dashoffset设置为总路径长度,然后随时间减小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);
-
从post中学习。另请参见