用D3动画绘制曲线
用D3动画绘制曲线
提问于 2014-04-16 03:16:07
我在d3中做了一个简单的贝塞尔曲线。我想动画的曲线从:起点到终点。我想把动画拍成1.25s？
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')回答 1
Stack Overflow用户
回答已采纳
发布于 2014-04-16 04:10:50
这是一种非常酷的方法，我在回答另一个问题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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23098364
复制相关文章
相似问题
腾讯云开发者
