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

的和弦图中看到我的意思

希望这对你有所帮助。

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

1 个答案:

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

1 个答案:

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