0

我正在使用一个年复一年完全相同的数据集，我想制作一个 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;
    }

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

4

1 回答 1

0

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

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的和弦图中看到我的意思的示例

希望这对您有所帮助。

于 2013-10-29T23:18:41.950 回答