csv - D3.js での複数のデータベース遷移

Question

age.csv にこのデータがあるとします。6 つの列には、異なる年の 3 人の名前と年齢が含まれています。

"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())再帰関数を使用してさまざまなアプローチを試みましたchangeYear()が、各要素の x 位置が崩壊してデフォルトで 0 になる前に、1 つまたは 2 つの遷移しか得られません。

私は完全に混乱しており、正しい方向に私を向けている誰かを本当に使うことができました.

編集: これを非常に長い投稿にして申し訳ありませんが、これは私の不完全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());
        }
    }