D3.js中的多个基于数据的过渡

Question

假设我在age.csv中有此数据。 六个列包含不同年份的三个人的姓名和年龄。

"name","1990","1992","1993","1994","1995"
"Rob",0,1,2,3,4,5
"Angie",15,16,17,18,19
"Chris",41,42,43,44,45

说我想用圆圈代表每个人。

var svg = d3.select("body").append("svg")
            .attr("width", 1000)
            .attr("height", 1000);

d3.csv("age.csv", function (data) {
       var people = svg.selectAll("circle")
                       .data(data)
                       .enter()
                       .append("circle")
                           .attr("cx", function(d) {return d[1990] * 10;})
                           .attr("cy", function(d, i) {return i*40; })
                           .attr("r", 20)
                           .attr("fill", "red");
});

此外，我希望圆从1990年的每个人到1995年的年龄沿x轴移动。要创建从一年到另一年的动画，我只需使用transition().attr("x", function (d) {return d[1991] * 10;}) 。

但是，如果我想重复此过程以在每年的数据中过渡怎么办？ 我已经尝试过使用.each("end", changeYear())不同方法.each("end", changeYear())而changeYear()是一个递归函数，但是在每个元素的x位置折叠且默认为0之前，我只能进行一到两个过渡。

我完全感到困惑，真的可以使用有人将我​​指向正确的方向。

编辑：很抱歉使这成为一个很长的帖子，但这是我错误的changeYear()递归函数。 使用此方法，我还添加了.each(changeYear()); 作为上述people变量的最后一行。

var x = 0;
var years = [1990,1991,1992,1993,1994,1995);

function changeYear() { 
        return function() {
            x++;
            d3.select(this)
            .transition()
            .duration(1000)
            .attr("x", function (d) {return d[years[x]] * 10;})
            .each("end",change());
        }
    }