D3.js：动画bezier曲线

Question

我正在使用以下代码为工作流程设计生成bezier curve：

    group.append("svg:path")
  .attr("d","m " +(300*k) +",0 q "+(z*150)+",-300,"+z*300+", 0")
      .attr("fill","blue")
  .style("stroke", "blue").attr("stroke-width",2)
  .attr("marker-end", "url(#arrow)").attr("fill","none").append("text");

我想在曲线中实现this animation。任何建议都可能有所帮助。

Answer 1

Here is an example动画Bezier曲线。你可以检查他在该页面上使用的代码，但是，基本上就是他们说的诀窍......

  

对于二阶或二次Bézier曲线，首先我们在三个控制点之间的线上找到两个 t 的中间点。然后我们再次执行相同的插值步骤，并沿着这两个中间点之间的线找到另一个 t 点。绘制最后一个点会产生二次贝塞尔曲线。对于更高的订单，可以重复相同的步骤。