用最少的资源在D3库中制作曲线动画

Least resource way to animate curve line at D3 library

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

D3是否有内置方法来动画绘制曲线?
我需要很多动画曲线在我的项目。我已经尝试了Jason Davies解决方案链接到示例， 链接到js文件，它工作得很好，但即使Chrome浏览器在一次30+动画曲线后开始滞后。在我的情况下，每条曲线都有自己的坐标，所以浏览器应该处理所有它们的路径，我理解这一点，但是Jason的解决方案在每次迭代时重新计算所有的路径，因为我理解这是为了通过灰点动态改变路径的能力。我是d3库的新手，所以我无法意识到，是否有可能一次计算所有路径，然后简单地将曲线绘制从0%动画到100% ?或者每件事都更容易，有简单的方法?

使用d3.js动画贝塞尔曲线的一种便宜而简单的方法是转换stroke-dasharray属性。这个想法是以整行为一个空格开始，并以一行为一个破折号结束。

请参阅下面的示例，以获取此想法的简单实现:http://jsfiddle.net/nj37gkgq/

设置路径的d参数将使用d3的默认动画。所以这个动画应该是正确的:

var svg = d3.select('#myelement').append('svg'),
    curve = svg.append('path')
                 .attr('d', 'M100,200 C100,100 250,100 250,200S400,300 400,200');
curve.transition()
       .attr('d', 'M0,0 C100,100 250,100 250,200S400,300 400,200');

查看JsFiddle

有关曲线命令的其他文档，请参阅官方文档

相关文章：