/ / como visualizar a transição em um loop - javascript, animação, d3.js, transição, layout de força

como visualizar a transição em um loop - javascript, animação, d3.js, transição, layout de força

Estou preso por um problema complicado agora. No framework d3js, eu configurei um layout direcionado a força. O objeto do nó está em tal estrutura como mostrado abaixo,

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

Cada nó tem um conjunto de animações a seremvisualizados, e a contagem de animações pode ser diferente para diferentes nós. Agora eu quero conduzir transições para todos os nós, o número de transições é dependente das contagens de animação, a hora de início de cada transição, ou seja, "atraso", é dependente do "tempo", e a animação principal é a mudança de preenchimento cor.

Alguém tem algumas sugestões para este caso, por exemplo realizar transições para múltiplos elementos, e cada um deve ser conduzido em um loop, o número de iterações é de acordo com a contagem de animação.

Respostas:

0 para resposta № 1

depois de algumas horas de luta, acho que consigo uma solução. O código é fornecido como referência, pois você também pode estar preso a esse problema.

    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)});
}
})