javascript - 単純な d3.js 円グラフ遷移 *データ結合なし?

Question

年ごとにまったく同じデータ セットを使用しており、年ごとの遷移がアニメーション化された D3 円グラフを作成したいと考えています。データは 2 次元配列で、各内部配列は年です。値の数は変わらないので、トランジション用にデータセットを差し替えるだけでいいと思いますし、データ結合(?)はしなくてもいいと思います。

最初は円グラフがうまく機能しており、クリックイベントを介してデータを更新しています。しかし、私のトランジションはうまくいきません。最初の円グラフのコードは次のとおりです (スペースを節約するために省略した変数宣言とその他のデータ管理があり、それらが機能しているためです)。

var outerRadius = w/2;
var innerRadius = 0;
var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);
var svg= d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

var arcs = svg.selectAll("g.arc")
                .data(pie(datamod[0]))
                .enter()
                .append("g")
                .attr("class", "arc")
                .attr("transform", "translate(" + outerRadius + ", " +outerRadius + ")");

arcs.append("path")
            .attr("fill", function(d,i){
                return colors[i];
            })
            .attr("d", arc);

そして、更新するには... ユーザーが本文のどこかをクリックすると、clickToChange() が呼び出されます。2次元配列の次の場所から新しいデータをロードし、その年のテキストも更新します。ここには、すでに実行されている場合に再起動しないようにするためのコードがいくつかあります...しかし、私が思う主な問題はコードにあります円弧を更新するには...

                function clickToChange()
        {   if(!isRunning)
            {
            isRunning = true;
            myTimer =setInterval(function() {if (yearcounter < 11)
                {
                    yearcounter++;
                }
                else
                {
                    yearcounter = 0;
                    stopDisplay();
                }

                var thisyear = 2000 +  yearcounter;             //updating happens here...      
                svg.selectAll("g.arc")
                                .data(pie(datamod[yearcounter]))
                                .transition()
                                .attr("class", "arc")
                                .attr("transform", "translate(" + outerRadius + ", " +outerRadius + ")");

                arcs.attr("fill", function(d,i){
                                return colors[i];
                                // console.log(d.value);
                                //              return "rgb(" + colorscale(d.value) + ",50,50)";

                            })
                            .attr("d", arc);

                    document.getElementById('year').innerHTML = thisyear;
        }, 2000); //end set interval
        }//end if
    }

    function stopDisplay()
    {
    clearInterval(myTimer);
    isRunning = false;
    }

問題は、データを正しい要素に適切にバインドしていない可能性があることだと思います.アークを選択するために正しい表記法を使用している場合は?