Сделайте несколько задержек в цепных переходах в D3.JS

Question

Я перемещаю прямоугольник от точки a до точки i на картинке, я хочу отметить задержку остановки 5 секунд для каждой точки (8 точек). переходы отлично работают в коде ниже (задержка работает только для точки b). Проблема в том, что я не могу добавить больше задержек для других моих переходов.

Есть ли способ сделать это?

Благодарим вас заблаговременно.

function TRANSITION(access,dur=10000,Delay=5000,b=390.5,c=523,d=632.5,e=810.8,f=942.5,g=1063,h=1196,i=1334.5) 
      { 
       access.transition().duration(dur).attr('x',b) 
       .transition().delay(Delay).duration(dur).attr('x',c) 
       .transition().duration(dur).attr('x',d) 
       .transition().duration(dur).attr('x',e) 
       .transition().duration(dur).attr('x',f) 
       .transition().duration(dur).attr('x',g) 
       .transition().duration(dur).attr('x',h) 
       .transition().duration(dur).attr('x',i) 
      } 

Answer 1

Можно добавить переход, который не изменяет никаких признаков, но все еще имеет продолжительность:

.transition() 
.duration(dur) 
.attr('x',d) 
.transition() // don't transition anything 
.duration(5000) // but take five seconds doing it 
.transition() 
.duration(dur) 
.attr('x',e) 

Я только проверил это в 4-й версии, так что возможно, что это не может работать в версии 3. В качестве альтернативы вы могли бы добавить строку .attr в переход с задержкой, если бы вы оставили один и тот же атрибут.