在d3中链接转换的正确方法是什么？

Question

受此other question的启发，我创建了一个绘制圆的动画（jsfiddle），然后是一条将其连接到另一个圆的线。我读过D3 v3并不需要聆听end事件来链式转换。

以下作品的代码，但我应该怎么重构它，所以它不使用end事件？

var margin = {top: 40, bottom: 40, left: 40, right: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.bottom - margin.top; 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var t0 = svg.append("circle") 
    .attr("r", 0) 
    .attr("cx", 40) 
    .attr("cy", 40) 
    .attr("class", "point") 
    .transition() 
    .duration(500) 
    .attr("r", 4); 

var t1 = t0.each("end", function(){ 
    var t2 = svg.append("path") 
     .style("stroke", "#000") 
     .style("stroke-width", 2) 
     .style("fill", "none") 
     .attr("d", "M40,40L40,40") 
     .transition() 
     .ease("linear") 
     .duration(500) 
     .attr("d", "M40,40L80,80"); 

    t2.each("end", function(){ 
     svg.append("circle") 
      .attr("r", 1) 
      .attr("cx", 80) 
      .attr("cy", 80) 
      .attr("class", "point") 
      .transition() 
      .duration(500) 
      .attr("r", 4); 
    }); 
}); 

Answer 1

好，感谢我意识到，我可以做这样的评论：

• 追加的第一个项目，并创建t0 = svg.transition()第一过渡，
• 追加的第二个项目，并创建第二转换（这将在t0结束后触发）t1 = t0.transition()
• 重复第三项t2 = t1.transition()

请注意，如果您想更改每次转换的持续时间，则必须在定义它时完成。这是错误的：

var t1 = t0.transition() 
    .ease("linear"); 
t1.select("path.line") 
    .duration(500) 
    .attr("d", "M40,40L80,80"); 

它应该是：

var t1 = t0.transition() 
    .ease("linear"); 
    .duration(500) 
t1.select("path.line") 
    .attr("d", "M40,40L80,80"); 

这是最后的代码（jsfiddle）：

var margin = {top: 40, bottom: 40, left: 40, right: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.bottom - margin.top; 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.append("circle") 
    .attr("r", 0) 
    .attr("cx", 40) 
    .attr("cy", 40) 
    .attr("class", "point-start") 

svg.append("path") 
    .style("stroke", "#000") 
    .style("stroke-width", 2) 
    .style("fill", "none") 
    .attr("class", "line") 
    .attr("d", "M40,40L40,40"); 

svg.append("circle") 
    .attr("r", 0) 
    .attr("cx", 80) 
    .attr("cy", 80) 
    .attr("class", "point-end") 

var t0 = svg.transition() 
    .duration(100); 

t0.select("circle.point-start") 
    .attr("r", 4); 

var t1 = t0.transition() 
    .duration(500) 
    .ease("linear"); 
t1.select("path.line") 
    .attr("d", "M40,40L80,80"); 

var t2 = t1.transition() 
    .duration(100); 
t2.select("circle.point-end") 
    .attr("r", 4);