[英]Animate the drawing of a curve in D3
我在d3中制作了一条简单的贝塞尔曲线。 我想从起点到终点设置曲线动画。 我希望动画花费1.25秒?
HTML
<div id="myelement">
</div>
JS:
var svg = d3.select('#myelement').append('svg'),
curve = svg.append('path')
.attr('d', 'M0,200 C400,200 400,200 400,0')
.attr('stroke', '#fff')
.attr('fill-opacity', 0);
curve.transition()
.attr('d', 'M0,200 C400,200 400,200 400,0')
这是一种很酷的动画曲线方法,我在另一个问题的答案中看到了https://stackoverflow.com/a/13354478/151212 。 根据您的情况,代码如下所示:
var svg = d3.select('#myelement').append('svg'),
curve = svg.append('path')
.attr('d', 'M0,200 C400,200 400,200 400,0')
.attr('stroke', '#000')
.attr('fill-opacity', 0);
var length = curve.node().getTotalLength();
curve.attr("stroke-dasharray", length + " " + length)
.attr("stroke-dashoffset", length)
.transition()
.duration(1250)
.attr("stroke-dashoffset", 0);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.