javascript – D3.js链转换为不同形状的复合动画

我正在做什么…

我正在用D3做一个复合动画.我有以下最终状态：

本质上我想连接点的动画 – 添加第一个圆.然后将该线绘制到第二个圆.绘制线后,将添加第二个圆.

为了添加一些视觉吸引力,我执行其他转换,例如改变第一个和第二个圆的圆半径作为线绘制.

我试过了…

我可以添加圆圈并单独绘制线,包括动画.然而,我不知道如何继续链接过渡到一起形成复合动画.

我有read about transitions/animations,建议使用每个(“结束”).虽然这可以用于绘制初始对象,但是在其他转换之后才会触发结束.

问题

>正在使用每个(“end”,…)链接转换的正确方法？
>如何开始另一个动画(即开始绘制线),同时仍允许另一个转换完成(即第一个圆半径突发).

解决方法

转换更容易链接,因为d3.v3而不使用“结束”.见说明 here.

例如,看看this one：

rect.transition()
  .duration(500)
  .delay(function(d,i) { return i * 10; })
  .attr("x",function(d,i,j) { return x(d.x) + x.rangeBand() / n * j; })
  .attr("width",x.rangeBand() / n)
  .transition()
  .attr("y",function(d) { return y(d.y); })
  .attr("height",function(d) { return height - y(d.y); });

这是为同一个元素上的转换.对于不同的元素,看看this one.

// First transition the line & label to the new city.
var t0 = svg.transition().duration(750);
t0.selectAll(".line").attr("d",line);
t0.selectAll(".label").attr("transform",transform).text(city);

// Then transition the y-axis.
y.domain(d3.extent(data,function(d) { return d[city]; }));
var t1 = t0.transition();
t1.selectAll(".line").attr("d",line);
t1.selectAll(".label").attr("transform",transform);
t1.selectAll(".y.axis").call(yAxis);

转换附加到svg元素并链接在那里.