Question

D3是否有内置方法来设置曲线的绘制动画？
我的项目中需要很多动画曲线。我已经尝试了Jason Davies解决方案link to example，link to js file，并且它工作正常，但即使Chrome浏览器一次开始落后30多个动画曲线。在我的情况下，每条曲线都有自己的坐标，所以浏览器应该处理所有曲线的路径，我理解这一点，但Jason的解决方案在每次迭代时重新计算所有路径，因为我知道这是为了通过灰色改变路径的能力点。
我是d3库的新手，所以我无法实现，是否可以计算所有路径一次，然后简单地将曲线绘制从0％设置为100％？或者一切都变得更加容易简单的方法吗？

Answer 1

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

有关曲线命令的其他文档，请参阅the official documentation。

Answer 2

使用d3.js为Bezier曲线设置动画的一种便宜而简单的方法是转换stroke-dasharray属性。我们的想法是从整条生产线开始是一个单一的差距，然后以一条短划线结束。

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

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

2 个答案: