我在 d3 中制作了一个简单的贝塞尔曲线。 我想为曲线设置动画:起点到终点。我希望动画需要 1.25 秒?
JSFiddle
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);
关于javascript - 在 D3 中动画绘制曲线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23098364/