/ / как да визуализираме прехода в цикъл - javascript, анимация, d3.js, преход, сила-оформление

как да визуализираме прехода в цикъл - javascript, анимация, d3.js, преход, сила-оформление

Сега съм заседнал от труден проблем. В d3js рамките създадох силово насочено оформление. Обектът на възела е в такава структура, както е показано по-долу,

{
ID: someID
animationCount: someInt
animationSet:{
animation1:{
time: time1
color: color1
}
animation2:{
time: time2
color: color2
}
...
}
}

Всеки възел има набор от анимации, които трябва да бъдатвизуализирани и броя на анимацията може да е различен за различните възли. Сега искам да провеждам преходи за всички възли, броят на преходите зависи от броя на анимацията, времето на стартиране на всеки преход, т.е. "забавяне", зависи от "времето", а основната анимация е промяната на запълнените цвят.

Всеки има някои предложения за този случай, т.е. провеждат преходи за множество елементи и всеки трябва да се провежда в цикъл, чийто итерации са в съответствие с броя на анимацията.

Отговори:

0 за отговор № 1

след няколко часа борба, мисля, че сам получавам решение. Кодът е представен като ориентир, тъй като може да сте заседнали в такъв проблем.

    d3.selectAll("circle").each(function(d){
var trans=d.animationSet;
var c=d.animationCount;
var sel=d3.select(this);
for(i=0;i<c;i++){
var transItem=trans["animation"+i]
var sel=sel.transition()
.delay(time_scale(Date.parse(transItem.time)))
.duration(2000)
.style("fill",fill(transItem.color))
.each("end",function(){d3.select(this)
.transition()
.delay(5000)
.style("fill",d3.rgb("#fff")
.brighter())
.duration(5000)});
}
})