javascript - d3jsでトランジションを実装するには?

Question

でアニメーション化するバラを1つだけ持つ方法はありますtransition()か? これまでのところ、このコードは ax,y 空間でバラを繰り返します。n 秒ごとに形を変える 1 つのバラが欲しいです。

 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)];
      }));
    });