Question

我现在陷入棘手的问题。在d3js框架中，我设置了一个强制定向布局。节点对象的结构如下所示，

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

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

对于这种情况，任何人都有一些建议，即对多个元素进行转换，每个元素应该循环进行，其迭代次数取决于动画计数。

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

如何在循环中可视化过渡

1 个答案: