在D3中为曲线图制作动画

阿琳·哈伍德（Armene Harwood）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。