javascript - 如何在 d3js 中实现过渡？

Question

有没有什么办法让一朵玫瑰只有那种生气勃勃transition()？到目前为止，此代码在 ax,y 空间上重复玫瑰，我希望有一朵玫瑰每 n 秒改变一次形状

 var rose = vis.selectAll("g")
    .data(d3.range(d * n).map(function(i) { return [1 + i % n, 1 + ~~(i / n)]; }))
    .enter().append("g")
    .attr("transform", function(d, i) {
      return "translate(" + [d[0] * dx, d[1] * dx] + ")";
    });

  rose.append("path")
    .attr("d", function(d) {
      var i = gcd.apply(null, d),
      p = Math.round(d[0] / i),
      q = Math.round(d[1] / i),
      k = p / q,
      period = (p & q & 1 ? 1 : 2) * Math.PI * q;
      return line(d3.range(0, period + Math.PI / 50, Math.PI / 50).map(function(theta) {
        var r = (dx - 5) * Math.cos(k * theta) / 2;
        return [r * Math.cos(theta), r * Math.sin(theta)];
      }));
    });