Javascript 简单的d3.js饼图转换*没有*数据联接？

我使用的数据集每年都是绝对相同的，我想制作一个D3饼图，其中包含每年的动画过渡。数据是二维数组，每个内部数组是一年。因为值的数量没有改变，所以我认为我可以替换转换的数据集，而不需要进行数据连接（？）

我的饼图最初运行良好，我正在通过单击事件更新数据。但我的过渡不起作用。下面是第一个饼图的代码（为了节省空间，我省略了变量声明和其他数据管理，因为这些东西正在工作）：

然后要更新…当用户单击身体中的任何位置时，将调用clickToChange（）。它从二维数组中的下一个点加载新数据，并更新今年的文本，这里有一些代码防止它在运行时重新启动。。。但我认为主要的问题是更新圆弧的代码

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

函数点击更改（）
{如果（！正在运行）
{
isRunning=true；
myTimer=setInterval（函数（）{if（yearcounter<11）
{
年表++；
}
其他的
{
年份计数器=0；
停止显示（）；
}
var thiswear=2000+yearcounter；//更新发生在这里。。。
svg.selectAll（“g.arc”）
.数据（pie（datamod[yearcounter]））
.transition（）
.attr（“类”、“弧”）
.attr（“转换”、“转换”（“+outerRadius+”，“+outerRadius+”））；
属性（“填充”，函数（d，i）{
返回颜色[i]；
//console.log（d.value）；
//返回“rgb（“+colorscale（d.value）+”，50,50）”；
})
.attr（“d”，弧）；
document.getElementById（'year'）.innerHTML=今年；
}，2000）；//结束集间隔
}//如果结束
}
函数stopDisplay（）
{
清除间隔（myTimer）；
isRunning=false；
}

---

我认为问题在于我可能没有将数据正确地绑定到正确的元素，如果我使用正确的符号来选择弧？

好的，我可以看到您的方法存在多个问题/缺点

1） 在代码中：

arc

是您正在进行的函数调用，它实际上不存在于您与我们共享的代码中，或者您需要编写。您多次调用此

arc

函数，因此需要解决此问题

2） 我将检查使用

.on（“单击”，函数（d，I）{在此函数调用中进行转换}）
希望这对您有所帮助。
好的，我添加了一些原始文件中的代码，但为了节省空间，我在帖子中遗漏了她：arc函数和包含更新的代码。通过将数据替换为
.data（）
，D3自动计算连接。在你的例子中，我看不到不这样做的好处——事实上这会让事情变得更难。我确实有arc和onclick（请参见编辑），并且正在调用它——但是对arc的更新没有正确进行。。。您能看到数据绑定或元素寻址有什么问题吗？**更具体地说，如果我要更改的属性是路径的填充，那么arcs.attr（“fill”，--）是否实际到达路径，或者我是否需要其他直接寻址的方法？如果包含.append（“path”）.attr（“fill”），我可以看到一些更新，但我不想添加新路径，只想修改现有路径。
                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;
    }

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