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

Question

我正在处理一个年复一年完全相同的数据集，我想制作一个 D3 饼图，其中包含年复一年的动画过渡。数据在一个二维数组中，每个内部数组是一年。因为值的数量没有变化，我想我可以只替换转换的数据集，我不需要做数据连接（？）。

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

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()。它正在从二维数组中的下一个位置加载新数据，并更新当年的文本，如果它已经在运行，这里有一些代码可以防止它重新启动......但我认为主要问题是代码更新弧线...

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

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

Answer 1

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

1) 在您的代码中：

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

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

2) 我会检查使用.on("click", function(d,i) { do your transitions here in this function call }); 方法，而不是设置每个项目的过渡和属性。我发现如果您开始对转换做任何更花哨的事情，它会使转换调用更容易管理。你可以在http://bl.ocks.org/mbostock/4062006看到我在和弦图中的意思的例子@

希望对你有所帮助。