如何在循环中可视化过渡

how to visualize transition in a loop

本文关键字：可视化 循环      更新时间：2023-09-26

我现在被一个棘手的问题卡住了。在d3js框架中，我设置了一个力定向布局。节点对象的结构如下所示:

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

每个节点都有一组要可视化的动画，不同节点的动画计数可能不同。现在我想对所有节点进行转场，转场的数量取决于动画计数，每次转场的开始时间，即。"延迟"取决于"时间"，主要动画是填充颜色的变化。

有人对这种情况有一些建议，即对多个元素进行过渡，每个元素都应该在一个循环中进行，其迭代次数根据动画计数

经过几个小时的挣扎，我想我自己找到了解决办法。提供的代码是作为参考，因为您可能也会遇到这样的问题。

    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)});
        }                   
    })
相关文章：