简单的d3.js饼图转换*没有*数据连接？ [英] simple d3.js pie chart transitions *without* data joins?

问题描述

我正在使用的数据集，每年都是完全相同的，我想制作一个D3饼图，动画过渡的年复一年。数据在2-d数组中，每个内部数组是一年。因为值的数量没有改变，我想我可以替换数据集的过渡，我不需要做一个数据连接（？）。

I'm working with a data set that's categorically identical from year to year, and I want to make a D3 pie chart with animated transitions from year to year. The data is in a 2-d array, each inner array is a year. Because the number of values isn't changing, I think I can just replace the data set for the transition, and I don't need to do a data join (?).

我最初的饼图工作正常，我通过点击事件更新数据。但我的转换不工作。这里是第一个饼图的代码（有变量声明和其他数据管理，我省略了，以节省空间，因为这个东西的工作）：

I have the pie chart working well initially, and I'm updating the data via click event. But my transitions aren't working. Here's the code for the first pie chart (there are variable declarations and other data managing that I've left out to save space, and because that stuff's working):

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

And then to update...clickToChange() is called when users click anywhere in the body. it's loading new data from the next spot in the 2-d array and also updates text for the year, and there's some code in here to keep it from restarting if it's already running... But the main problem I think is with the code to update the arcs...

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

我认为问题是我可能没有正确地绑定数据

I think the problem is that I'm possibly not binding the data properly to the correct elements, and if I'm using the correct notation to select the arcs?

推荐答案

好的，我可以看到多个问题/

Okay, I can see multiple issues/drawbacks with your approach.

1）在您的代码中：

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

arc 是一个你正在做的函数调用，它并不存在于你与我们共享的代码中，或者你需要编写。您有这个 arc 函数调用多次，因此需要解决。

arc is a function call that you are making that doesn't actually exist in the code that you have shared with us, or you need to write. You have this arc function call multiple times, so this will need to be addressed.

2）使用 .on（click，function（d，i）{在此函数调用中执行您的转换}）; 方法而不是设置转换和属性每个项目。我发现，如果你开始做任何更喜欢的过渡，它使转换调用更容易管理。您可以在 http://bl.ocks.org/mbostock上查看Chord Diagram中我的意思的示例/ 4062006

2) I would check into using the .on("click", function(d,i) { do your transitions here in this function call }); method instead of setting the transition and attributes of each of the items. I have found that it makes the transition calls easier to manage if you start doing anything more fancy with the transitions. You can see an example of what I mean in the Chord Diagram at http://bl.ocks.org/mbostock/4062006

希望这有助于您。

这篇关于简单的d3.js饼图转换*没有*数据连接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！