在D3中绘制曲线的动画

Animate the drawing of a curve in D3

本文关键字：动画 曲线 绘制 D3      更新时间：2023-09-26

我在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);

JSFiddle

相关文章：