Question

我正在学习D3js并尝试将一些动画链接在一起。

基本上我有三个svg元素，我想同时转换。有一个圆，一个矩形和一个文本元素。

例如，我正在尝试使圆圈从黑色过渡到绿色，矩形从黑色过渡到蓝色，并用淡出效果替换文本，淡入效果。

我可以这样做一次，但我想要按顺序发生一系列这些动画。

以下是1个过渡工作的第一个小提琴： http://jsfiddle.net/mgcdanny/6nbRK/

这是我尝试使用for循环和JSON对这些进行排序，但只发生了最后一次转换： http://jsfiddle.net/mgcdanny/U7StQ/

这可能会更好，因为一系列的enter（），update（），exit（）命令？

感谢您的帮助！

小提琴1代码： `

        var svg = d3.select("body")
                    .append('svg')
                        .attr('width', 500)
                        .attr('height', 500)

        var circle = d3.select("svg")
                        .append("circle")
                            .attr('cx', 10)
                            .attr('cy', 10)
                            .attr('r', 10)

        var rect = d3.select("svg")
                        .append("rect")
                            .attr('width', 20)
                            .attr('height', 20)
                            .attr('x', 30)
                            .attr('y', 30)

        var text = d3.select("svg")
                        .append("text")
                            .text("hello")
                            .attr("x",60)
                            .attr("y",60)
                            .attr('opacity',1)

        var tran = svg.transition().duration(2000)

        tran.select("rect").attr('fill', 'red')
        tran.select("circle").attr('fill', 'blue')
        tran.select("text").attr('opacity', 0)
        //new transition
        svg.transition()
            .duration(2000)
            .delay(2000)
            .select("text")
            .attr('opacity', 1)
            .text("hello again!")
            .attr("x",60)
            .attr("y",60)

    </script>
</body>

`

小提琴2代码：＆＃39;

        theData = [
                    {"words":"today", "rect_color": "red", "circle_color":"blue"},
                    {"words":"tomorrow", "rect_color": "green", "circle_color":"yellow"},           
                    {"words":"Day After That", "rect_color": "purple", "circle_color":"brown"}]         

        var svg = d3.select("body")
                    .append('svg')
                        .attr('width', 500)
                        .attr('height', 500)

        var circle = d3.select("svg")
                        .append("circle")
                            .attr('cx', 10)
                            .attr('cy', 10)
                            .attr('r', 10)

        var rect = d3.select("svg")
                        .append("rect")
                            .attr('width', 20)
                            .attr('height', 20)
                            .attr('x', 30)
                            .attr('y', 30)

        var text = d3.select("svg")
                        .append("text")
                            .text("hello")
                            .attr("x",60)
                            .attr("y",60)
                            .attr('opacity',1)

        var tranFunc = function(object){
            var tran = svg.transition().duration(2000)
            tran.select("rect").attr('fill', object.rect_color)
            tran.select("circle").attr('fill', object.circle_color)
            tran.select("text").attr('opacity', 0)
            var tran2 = tran
            tran2.transition().select("text")
                .attr('opacity', 1)
                .text(object.words)    
        }

        var allTran = function(list){
            for(var i = 0; i < list.length; i++){
                tranFunc(list[i])
            }
        }

    allTran(theData)
    </script>

＆＃39;

D3js链接动画作为JSON的功能

0 个答案: