Каков правильный способ цепных переходов в 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

Ok, благодаря комментариям я понял, что я просто не могу это сделать:

• добавить первый элемент и создать первый переход с 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);