javascript - 在 D3 库中为曲线设置动画的最少资源方式

Question

D3 是否有内置方法来动画绘制曲线？
我的项目中需要很多动画曲线。我已经尝试过 Jason Davies 解决方案链接到示例，链接到 js 文件，它工作正常，但即使是 Chrome 浏览器也开始滞后于 30 多条动画曲线。
在我的情况下，每条曲线都有自己的坐标，所以浏览器应该处理所有这些的路径，我理解这一点，但是 Jason 的解决方案会在每次迭代时重新计算所有路径，据我所知，这样做是为了能够通过灰色动态改变路径点。
我是 d3 库的新手，所以我无法意识到，是否可以计算一次所有路径，然后简单地绘制从 0% 到 100% 的动画曲线？还是一切都变得更容易了，并且有简单的方法吗？

Answer 1

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

有关此想法的简单实现，请参见此 jsfiddle：http: //jsfiddle.net/nj37gkgq/

Answer 2

设置路径的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上看到这个。

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